Search the Community

I am trying to apply CSS from a site to my homefeatured module on my homepage. http://tympanus.net/Tutorials/OriginalHoverEffects/ (Demo 1). Where it says "Hover Style 1" I'd like it to be the title of the product. Then the short description below it. And where it says "Read More" I'd like it to be the "View" link that I currently have (to view that product page). I'm using Prestashop 1.5.4.1. I like the layout of how the demo has it. I'd like 2 on top and 2 on the bottom. My site currently shows 4 products in 1 row. My Homefeatured.css is shown below: #featured-products_block_center {width:101.3%;border-radius: 0px 0px 10px 10px; border:.1px solid #ede; margin-top:11px;border-bottom:0px!important;padding:5px 0px 0px 0px;box-shadow:0 8px 6px -6px #888;-moz-box-shadow:0 8px 6px -6px #888;-webkit-box-shadow:0 8px 6px -6px #888;} #featured-products_block_center li { width: 157px; height: 242px; margin:8px 0px 1px 11px; padding: 1px 7px;border:1px dotted #ede; } #featured-products_block_center .product_image:hover {opacity: .7; transition: opacity 500ms ease-out 0s; } #featured-products_block_center p.title_block{text-transform: uppercase; border-bottom: 1px solid rgb(222, 222, 222);padding-bottom: 4px;font-weight: 400; text-shadow:0px 0px 0px!important; color:rgb(152,153,153); background: #f9fcf7; background: -moz-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); font:18px Arial,Helvetica,sans-serif;background:none;} #featured-products_block_center li.last_item_of_line {margin-right:0;} #featured-products_block_center li p.s_title_block a, #featured-products_block_center li p.s_title_block{color: rgb(153, 153, 153); display: block; overflow: hidden; text-decoration: none; text-align:center; position: relative; white-space: nowrap; margin: 3px 0px; font-size: 14px; padding-bottom:3px!important; font-family: Arial,Helvetica,sans-serif;} #featured-products_block_center li:hover p.s_title_block a,#featured-products_block_center li:hover p.s_title_block a{color:rgb(26, 126, 167);} #featured-products_block_center li .product_image,.products_block li img { display:block; position:relative; overflow:hidden; border:0px!important; } img.pring { margin: 0px; padding: 0px; width: 124px; height: 124px; display: block;} .ie8 .new{top:70px;right:10;width:24px;} .ie7 .new {top:80px;right:20;width:24px;} #featured-products_block_center .product_image span.new { display:block;position:absolute;width:24px;top:10px;right:10px;padding:2px;text-align:right;text-transform:uppercase;background-color:#fff;webkit-box-shadow:1px 1px 2px rgba(50,50,50,0.3);-moz-box-shadow:1px 1px 2px rgba(50,50,50,0.3);box-shadow:1px 1px 2px rgba(50,50,50,0.3);} #featured-products_block_center li:hover .product_desc a {font:13px Arial,Helvetica,sans-serif;text-decoration:none;color: rgb(153, 153, 153);} #featured-products_block_center li .product_desc a{color:#ccc;font:13px Arial,Helvetica,sans-serif;text-decoration:none;} #featured-products_block_center li span.on_sale{position:absolute;top:0px;padding:2px;text-align:right;text-transform:uppercase;0.3);color:rgb(153,153,153)} #featured-products_block_center li:hover span.new {color: rgb(26, 126, 167);} #featured-products_block_center li:hover span.on_sale{color: rgb(26, 126, 167);} #featured-products_block_center li .lnk_more { width:30px;position:absolute;top:151px;margin-left:55px; visibility:hidden; text-transform: uppercase; font:10px Arial,Helvetica,sans-serif; background-color: rgb(255, 255, 255); text-decoration:none;padding:1px 2px; box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3);-moz-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3);-webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3); } #featured-products_block_center li:hover .lnk_more {visibility:visible;} #featured-products_block_center .price_container { margin-top:11px; background: none repeat scroll 0 0 #383838; box-shadow:1px 1px 2px rgba(50, 50, 50, 0.3);border:0px; padding:3px 0px; width:100%; } #featured-products_block_center li span.price { font-size: 12px; margin-left: 2px; color: rgb(255, 255, 255); font-family: Arial,Helvetica,sans-serif; text-shadow:.1px .3px 3px #888888; letter-spacing:.3px; font-weight:300; } #featured-products_block_center li:hover span.price {font-weight:bold;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button { visibility:hidden; position: relative; margin:-25px 8px 1px 70px; background:#25aae1; color:#fff; box-shadow:1px 1px 3px #383838; border:0px; height:12px;} #featured-products_block_center li:hover .ajax_add_to_cart_button,#featured-products_block_center li:hover.last_item_of_line {;visibility:visible} #featured-products_block_center li span.exclusive {display:none;} @media only screen and (min-width:1000px) and (max-width:1120px){ #featured-products_block_center{width:90%;} #featured-products_block_center li{width: 140px; height: 230px; margin:21px 8px 1px 12px; padding: 1px 7px} img.pring{width:124px;height:100px;} #featured-products_block_center p.title_block{font-size:14px;} #featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:12px;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{margin-left:56px;} } @media only screen and (min-width:744px) and (max-width:999px){#featured-products_block_center{width:79%;} #featured-products_block_center li{width: 120px; height: 220px; margin:15px 8px 1px 10px; padding: 1px 7px} img.pring{width:100px;height:100px;} #featured-products_block_center p.title_block{text-align:center;font-size:14px;} #featured-products_block_center li .product_desc a ,#featured-products_block_center li:hover .product_desc a{font-size:10px;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{padding:2px;margin-top: -19px; margin-left: 46px;font-size:11px;} #featured-products_block_center li span.price{font-size:11px;} } @media only screen and (min-width:488px) and (max-width:773px){#featured-products_block_center{width:55%;} #featured-products_block_center li{width: 90px; height: 200px; margin:21px 8px 1px 14px; padding: 1px 7px} img.pring{width:80px;height:80px;} #featured-products_block_center li span.price{font-size:9px;} #featured-products_block_center p.title_block{text-align:center;font-size:12px;} #featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:10px;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{font-size:8px;padding:1px;margin-top: -19px; margin-left: 39px;} } @media only screen and (max-width:487px) and (min-width:0px){#featured-products_block_center{width:30%; padding: 5px 0px 3px 0px;} #featured-products_block_center li{width: 80px; height: 180px; margin: 22px 7px 1px 30px; padding: 1px 7px} img.pring{width:74px;height:74px;} #featured-products_block_center p.title_block{text-align:center;font-size:10px;} #featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:9px;} #featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{margin-top: -18px; margin-left: 29px;padding:0px;font-size:8px;} #featured-products_block_center li span.price{letter-spacing:0px;font-size:9px;margin-left:0px;} #featured-products_block_center li.last_item_of_line{display:none;} } My Homefeatured.tpl: <!-- MODULE Home Featured Products --> <div id="featured-products_block_center" class="block products_block clearfix"> <h4 class="title_block">{l s='Featured products' mod='homefeatured'}</h4> {if isset($products) AND $products} <div class="block_content"> {assign var='liHeight' value=250} {assign var='nbItemsPerLine' value=4} {assign var='nbLi' value=$products|@count} {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines} {math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight} <ul style="height:{$ulHeight}px;"> {foreach from=$products item=product name=homeFeaturedProducts} {math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo} {if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if} <li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}"> <a href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a> <h5 class="s_title_block"><a href="{$product.link|escape:'html'}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5> <div class="product_desc"><a href="{$product.link|escape:'html'}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div> <div> {if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if} {if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE} {if ($product.quantity > 0 OR $product.allow_oosp)} <a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')|escape:'html'}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a> {else} <span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span> {/if} {else} <div style="height:23px;"></div> {/if} </div> </li> {/foreach} </ul> </div> {else} <p>{l s='No featured products' mod='homefeatured'}</p> {/if} </div> <!-- /MODULE Home Featured Products --> Thanks for your help!