generalexperts Posted March 16, 2014 Share Posted March 16, 2014 (edited) 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! Edited September 4, 2014 by generalexperts (see edit history) Link to comment Share on other sites More sharing options...
generalexperts Posted April 1, 2014 Author Share Posted April 1, 2014 Still looking for help... Thanks! Link to comment Share on other sites More sharing options...
generalexperts Posted April 17, 2014 Author Share Posted April 17, 2014 Anyone able to help? This would be a great improvement for prestashop sites if this can be solved! Thanks! Link to comment Share on other sites More sharing options...
vhgdesign Posted June 20, 2014 Share Posted June 20, 2014 Just sent you PM Link to comment Share on other sites More sharing options...
vekia Posted June 20, 2014 Share Posted June 20, 2014 it's not job offers section, remember about forum rules Link to comment Share on other sites More sharing options...
generalexperts Posted June 20, 2014 Author Share Posted June 20, 2014 the PM was not a job offer... Link to comment Share on other sites More sharing options...
vhgdesign Posted June 21, 2014 Share Posted June 21, 2014 Hey, first, I'm front-end developer, so, keep a copy of your .tpl file ;-) Open new div class=mask (line 18) just above h5 class="s_title_block" and close it before closing li tag (line 34) <!-- 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> <!--New div start here--> <div class="mask"> <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> <!--New div end here--> </div> </li> {/foreach} </ul> </div> {else} <p>{l s='No featured products' mod='homefeatured'}</p> {/if} </div> <!-- /MODULE Home Featured Products --> Then, open your Homefeatured.css and add the code below just above @media only screen and (min-width:1000px) and (max-width:1120px) /* New code */ #featured-products_block_center li { position: relative; } #featured-products_block_center li .mask { position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,.7); top: 0; left: 0; z-index: 99; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } #featured-products_block_center li:hover .mask { opacity: 1; } #featured-products_block_center li .mask h5 { padding: 10px; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #featured-products_block_center li .mask .product_desc { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } #featured-products_block_center li img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; max-width: 100%; height: auto; } #featured-products_block_center li:hover img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } #featured-products_block_center li .mask .product_desc + div { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #featured-products_block_center li:hover .mask h5, #featured-products_block_center li:hover .mask .product_desc, #featured-products_block_center li:hover .mask .product_desc + div { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } #featured-products_block_center li:hover .mask .product_desc { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } #featured-products_block_center li:hover .mask .product_desc + div { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #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: 10px auto; } #featured-products_block_center li .product_desc a, #featured-products_block_center li:hover .product_desc a { color: #333; padding: 5px 10px; } #featured-products_block_center .price_container { padding: 0 10px; width: auto; } Cheers, Vel Link to comment Share on other sites More sharing options...
markjeggar Posted July 2, 2014 Share Posted July 2, 2014 Check this multiple image overlay... <!--StartFragment--> .multiPic{width:320px;height:235px;background: url(img/fish-all.png) no-repeat;border:5px solid #000000;}.multiPic .text1{position:relative;top:0px;width:320px;height:80px;background:#FF2400;background: url(img/fish-1.png) no-repeat;opacity:0;}.multiPic .text2{width:320px;height:80px;top:75px;background:#FFA500;background: url(img/fish-2.png) no-repeat;opacity:0;}.multiPic .text3{width:320px;height:80px;top:75px;background:#008000;background: url(img/fish-3.png) no-repeat;opacity:0;}.multiPic:hover .text1,.multiPic:hover .text2,.multiPic:hover .text3{opacity:0.9;} More overlay hover effects...http://www.corelangs.com/css/box/hover.html Mark Link to comment Share on other sites More sharing options...
generalexperts Posted July 3, 2014 Author Share Posted July 3, 2014 Vel, This didn't completely work like how the demo 1 is in the link. Although it applied some effect. If you could check my site (shown in post 1). Also, when the window is minimized (in Chrome) the products overlap. Is there a way to not allow that to happen regardless of window browser size? Still trying to get closer to the look of Demo 1. I really appreciate your help! Mark - I'm sorry i don't know what I'm looking at here. Does this apply to this topic? It may apply to Custom CSS effects. But I'm looking for help specifically to the link in the first post. Thanks for helping guys! If anyone has a solution please let me know, you can see how long i've been looking for a solution for this! Link to comment Share on other sites More sharing options...
PascalVG Posted July 3, 2014 Share Posted July 3, 2014 Hi GE, Re-read Vel's post. It seems you didn't add the <div class="mask"> .... </div> to the tpl file... (see top part of Vel's post) If you add it, it comes close to what you need. Maybe some additional backgrounds, alignment etc, but it does the job as wished for. pascal. N.B. I myself wouldn't remove the product name when NOT hovering over the product, as the name may give useful information to make the decision to hover over it or not (i.e. to see more about this product). So, I would always keep the product name visible, in any state. Maybe MOVE the name to the new place, but not remove it when not hovering over the image. Just my thoughts... Link to comment Share on other sites More sharing options...
generalexperts Posted July 3, 2014 Author Share Posted July 3, 2014 I think I did do it properly. I followed it and it showed changes. Just not changes from "Demo 1" in the link. I definitely do need the additional changes applied. And don't know how to do them. Would you be able to help? BTW, thanks for the advice, that totally makes sense not to remove the product name. So I guess I'm looking for something like Demo 1 but with the product name already there. I appreciate the feedback! Let me know if you can help me out more with this. As you can see this has become another problem i've been trying to solve for entirely way too long! Thanks! Link to comment Share on other sites More sharing options...
PascalVG Posted July 5, 2014 Share Posted July 5, 2014 Hi GE, When checking the main page, I cannot find any line that includes class="mask", (or even just mask , for that matter), so it looks like the lines that included this aren't added to the tpl file, so it seems. 1) Can you include the file where you add the <div class="mask"> etc. code? 2) What is the exact location on the server of this file? Please show full path. pascal. Link to comment Share on other sites More sharing options...
generalexperts Posted July 7, 2014 Author Share Posted July 7, 2014 Here's my original TPL. Could you help me make the changes? Thanks! <!-- 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, 'large_default')|escape:'html'}" height="200px" width="200px" 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" href="{$product.link|escape:'html'}" title="{l s='Read More' mod='homefeatured'}">{l s='Read More' 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 --> Here is the homefeatured.css that I think I have made the correct changes. #featured-products_block_center {width:101.3%; border-radius: 0px 0px 10px 10px; border:0px solid #ede; margin-top:15px; 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; padding-bottom:100px;} #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; margin-top:5px; 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;} } /* New code */ #featured-products_block_center li { position: relative; } #featured-products_block_center li .mask { position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,.7); top: 0; left: 0; z-index: 99; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } #featured-products_block_center li:hover .mask { opacity: 1; } #featured-products_block_center li .mask h5 { padding: 10px; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #featured-products_block_center li .mask .product_desc { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } #featured-products_block_center li img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; max-width: 100%; height: auto; } #featured-products_block_center li:hover img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } #featured-products_block_center li .mask .product_desc + div { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #featured-products_block_center li:hover .mask h5, #featured-products_block_center li:hover .mask .product_desc, #featured-products_block_center li:hover .mask .product_desc + div { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } #featured-products_block_center li:hover .mask .product_desc { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } #featured-products_block_center li:hover .mask .product_desc + div { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } #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: 10px auto; } #featured-products_block_center li .product_desc a, #featured-products_block_center li:hover .product_desc a { color: #333; padding: 5px 10px; } #featured-products_block_center .price_container { padding: 0 10px; width: auto; } @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;} } Link to comment Share on other sites More sharing options...
PascalVG Posted July 7, 2014 Share Posted July 7, 2014 Hi GE, Sorry, I'm on holiday with only iPad, so cannot make the changes, but if you look at post #7, Vel has two additional lines: Line 18: <div class="mask"> And line 21: </div> , if you add these two lines as indicated in post #7, you see more of what you wanted :-) (P.S. Vel wrote about the closing tag being on line 32/33. This is NOT the closing tag of the new <div class="mask">. Its closing tag is on line 21) Pascal Link to comment Share on other sites More sharing options...
generalexperts Posted July 7, 2014 Author Share Posted July 7, 2014 Oh yeah, just a misunderstanding of getting that right. Thanks for helping and thanks for your patience!! The changes are very close to the Demo 1. I'd like to have boxes larger, like demo 1 (in the link), and the tint effect. Also, If you notice, no matter how big the browser window is, the squares stay the same. The product squares change size and it looks like a mess... I'd like to have it similar to the demo in the link above... Also, 2 on top and 2 on the bottom (fixed). Thanks! Link to comment Share on other sites More sharing options...
generalexperts Posted July 16, 2014 Author Share Posted July 16, 2014 Still looking for help. I appreciate it! Link to comment Share on other sites More sharing options...
generalexperts Posted July 20, 2014 Author Share Posted July 20, 2014 Looking for a little help. Been trying to do this for 4 months now... Thanks! Link to comment Share on other sites More sharing options...
generalexperts Posted July 29, 2014 Author Share Posted July 29, 2014 Can anyone take a look? Thanks you! Link to comment Share on other sites More sharing options...
generalexperts Posted August 24, 2014 Author Share Posted August 24, 2014 (edited) many many months later... solved. Thanks to the people that helped! Edited September 4, 2014 by generalexperts (see edit history) Link to comment Share on other sites More sharing options...
Vilas Posted July 16, 2015 Share Posted July 16, 2015 How do you solved it? I have one more similar kind of module. Homepage category products. How that kind of effect to them? My best devolper friend is too much busy thaty not wanted to trouble him. Will be great if you guide me. Link to comment Share on other sites More sharing options...
vekia Posted July 16, 2015 Share Posted July 16, 2015 what kind of hover effect you want to add? any example? Link to comment Share on other sites More sharing options...
Vilas Posted July 17, 2015 Share Posted July 17, 2015 Which is generally now comes with featured product module in latest versions of prestshop. Like add to cart & view options. Or anything simple to do. my site url is www dot moryasales dot com Link to comment Share on other sites More sharing options...
Vilas Posted July 30, 2015 Share Posted July 30, 2015 no one have any idea? Link to comment Share on other sites More sharing options...
ingrossoerisparmio Posted June 21, 2017 Share Posted June 21, 2017 What is the solution of this question? Someone can insert a working guide on how to modify Custom CSS Hover effects to Homefeatured? For example i need to overlap 3 small image on mouse hover.... Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now