Hover Effect on product image shows price

Dan23 · August 20, 2013

Hi there,

I'm trying to figure out how to implement a hover effect when mouseover.

just like here: http://jsfiddle.net/hovanessb/865Uk/

it comes with two codes. I believe that one should go on the product_list.css and the other on the product-list.tpl. However, I can't get to edit this code correctly to adapt it.

What should I put where?

Thanks a lot in advance!!!

{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clearfix">
{foreach from=$products item=product name=products}
 <li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
  <div class="center_block">
   <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>
   <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
   <p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</a></p>
  </div>
  <div class="right_block">
   {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
   {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
   {if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
   {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
   <div>
 {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
 {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
   </div>
   {/if}
   {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
 {if ($product.allow_oosp || $product.quantity > 0)}
  <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
 {else}
   <span class="exclusive">{l s='Add to cart'}</span>
 {/if}
   {/if}
   <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
   {if isset($comparator_max_item) && $comparator_max_item}
 <p class="compare"><input type="checkbox" onclick="checkForComparison({$comparator_max_item})" class="comparator" id="comparator_item_{$product.id_product}" value="{$product.id_product}" /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>
   {/if}
  </div>
 </li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}

/* product-list.tpl */
ul#product_list { margin-top: -140px; list-style-type: none ; margin-bottom: 30px}
ul#product_list li {
height: 278px;
left: 13px;
position : absolute ;
z-index : 1 ;
background: none;
border: none;
padding: 6px;
min-height: 250px;
width: 25%;
float: left;
position: relative;
display: inline-block;
text-align : center;
box-sizing: border-box;
margin-bottom: 23px
}
* html ul#product_list li {
height: auto !important;
height: 130px
}
ul#product_list li a {
height:265px;
text-decoration: none;
color: #374853
}
ul#product_list a.product_img_link {
border: solid 0px #d0d3d8;
display: block;

}
ul#product_list a.product_img_link img {
vertical-align: bottom;
display: block;
width: 100%;
height: auto;
}
ul#product_list li h3 { margin: 0.4em 0 }
ul#product_list li .new {
display : none;
background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border: 0px solid #488C40;
color: white;
font-size: 0.6em;
font-weight: bold;
margin: 0 1em 0 0;
padding: 0 0.4em;
text-transform: uppercase;
vertical-align: 0.3em
}
ul#product_list li p.product_desc {
margin-bottom: 0;
font-size: 0.92em
}
ul#product_list li div.right_block {
width: 11em;
text-align: right;
margin-top: 8px;
position: absolute;
bottom: 14px;
right: 6px;
display: none;
}
ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em
}
ul#product_list li .price {
display: block;
font-size: 12px;
color: #484848;
margin-bottom: 0.2em
}
ul#product_list li span.availability {
color: #488c40;
font-size: 0.9em
}
ul#product_list li a.button { margin-top: 0.5em }
ul#product_list li p.compare input { vertical-align: text-bottom }

vekia · August 20, 2013

instead the $20.00 use

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}

instead the picture <img src="http://www.trueentity.com/media/catalog/product/b/a/baseballtee_1_1.jpg">

use:

   <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>

and of course create the css styles in the .css stylesheet

.hoverPrice{
   position:relative;
   width:300px;
   width:300px;
}
.hoverPrice a:first-child{
   position:absolute;
}
.hoverPrice a:first-child:hover + a{
   display:block;
}
.hoverPrice a:nth-child(2){
   display:none;
}
img{
   height:100%;
   width:100%;
}
.hoverPriceBg {
   padding:50%;
   position: absolute;
   z-index: 2;
   background-color: #033;
   -ms-filter: "alpha(opacity=50)";
   filter: alpha(opacity=50);
   opacity: .5;
}
.hoverPriceCirc {
   position: absolute;
   z-index: 3;
   padding:25%;
   text-align: center;
   background: #37c4f3;
   -webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;
   -webkit-box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
   -moz-box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
   box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
   top:75px;
   left: 25%;
}
.hoverPriceCirc span {
   position: absolute;
   z-index: 4;
   color: white;
   width: 100%;
   top: 39%;
   left: 0;
   text-align: center;
   font-size: 2em;
}

</a>

</a>

</div>

Dan23 · August 20, 2013

Thank you very much!!

I've got something more or less decent, however the product description and title moved to the top and I cannot explain why. Any ideas?

http://shop.jackerma.p?id_category=7

Edited August 21, 2013 by vekia (see edit history)

Dan23 · August 20, 2013

Solved that too. Missing css for div.block_center

Thanks a lot! My page looks quite nice on Google Chrome only though.

vekia · August 21, 2013

hello

thanks for information

is there any chance to test your website?

Jiten rash (away) · August 21, 2013

i checked its working but blinking wait will see

vekia · August 21, 2013

ohh for me url doesnt work, i tried to edit the post and now it doesnt work at all

can you share it once again, please?

Dan23 · August 21, 2013

shop.jackermag.com

but the effect is only on the categories: (click on "MEN")

http://shop.jackerma...p?id_category=7

On Chrome it works perfectly on Firefox we have only 3 rows plus extra Disco effect on the hover when you go over the image.

Edited August 21, 2013 by jackermag (see edit history)

Jiten rash (away) · August 22, 2013

try this way

ul#product_list li .price

{opacity:0; filter:alpha(opacity=0);}

ul#product_list li:hover .price{opacity:1;

filter:alpha(opacity=100);

wmh90 · November 22, 2013

Hello, I'm trying to do this price hover on my website, but not in the list of products in category.

I want this in the homefeatured on the home of my store.

I'm trying without success.

I already put the code in the homefeatured.tpl and the css code in the homefeatured.css, and even making a new .css file is not working for me.

Here's my website: http://trashmashers.com.br/loja/ with my efforts to make it work.

the code on /modules/homefeatured/homefeatured.tpl

<!-- MODULE Home Featured Products -->
<div id="featured-products_block_center" class="block products_block">
	<h4>{l s='Produtos em Destaque' mod='homefeatured'}</h4>
	{if isset($products) AND $products}
		<div class="block_content">
<div class="hoverPrice">
    <a href="#">
        <div class="hoverPriceBg"></div>
        <div class="hoverPriceCirc">{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}</div>
    </a>
</div>  
			{assign var='liHeight' value=342}
			{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}
				<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}clear{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">
					<h5><a href="{$product.link}" title="{$product.name|truncate:100:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:100:'...'|escape:'htmlall':'UTF-8'}</a></h5>
					<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:130:'...'}</a></div>
					<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" /></a>
					<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}
						<a class="button" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>
						{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.php')}?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>

{if ($product.quantity > 0 }
{/if}
			{/foreach}
			</ul>
		</div>
	{else}
		<p>{l s='No featured products' mod='homefeatured'}</p>
	{/if}
</div>

<!-- /MODULE Home Featured Products -->

and my /modules/homefeatured/homefeatured.css

#featured-products_block_center li {
	margin-right:16px;
	padding:13px 0;
	width:166px;
	height:240px
}
#featured-products_block_center li.last_item_of_line  {margin-right:1px;}
#featured-products_block_center .s_title_block,  #featured-products_block_center h5 {
	padding-top:5px;
	font-size:13px;
	color:#222;
	padding-bottom: 0;
	font-weight:bold;
}

#featured-products_block_center .product_image {
	display:block;
	position:relative;
	overflow:hidden;
	width:166px;
	height:166px;
}

.ie9 #featured-products_block_center .product_image {
	display:block;
	position:relative;
	overflow:hidden
}
.ie8 #featured-products_block_center .product_image span.new {
	display:block;
	position:relative;
	overflow:hidden
}
.lt-ie6 #featured-products_block_center .product_image span.new {
	display:block;
	position:relative;
	overflow:hidden
}

#featured-products_block_center .product_image span.new {
	display: block;
	position: absolute;
	right:65px;
	width:101px;
	top:0px

}
.ie10 #featured-products_block_center .product_image span.new{top:0px;right:65px}
.ie9 #featured-products_block_center .product_image span.new{top:0px;right:65px}
.ie8 #featured-products_block_center .product_image span.new{top:0px;right:65px}
.lt-ie6 #featured-products_block_center .product_image span.new {top:0px;right:65px}

#featured-products_block_center .product_desc {height:45px;}
#featured-products_block_center .product_desc,
#featured-products_block_center .product_desc a {
	color:#666
}
#featured-products_block_center .lnk_more {
	display:inline;
	padding-right:10px;
	font-weight:bold;
	font-size:10px;
	color:#0088cc;
	background:url(img/arrow_right_1.png) no-repeat 100% 3px;
}
#featured-products_block_center .price_container {
	margin-top:10px;
	padding:0;
}
#featured-products_block_center .price {
	font-weight:bold;
	font-size:16px;
	color:#c50b0a;
	position:absolute;
	top:32%;
}
#featured-products_block_center .new_price {
	font-weight:bold;
	font-size:16px;
	color:#c50b0a;
	position:absolute;
	top:76%;
}
#featured-products_block_center li .ajax_add_to_cart_button {display:none;}
#featured-products_block_center li span.exclusive {display:none;}

#name
{
  position:relative;
}
#price
{
  position:absolute;
  bottom:0;
  left:0;
  height:20px;
  width:126px;
  top:55px;
}
.hoverPrice{
    position:relative;
    width:300px;
    width:300px;
}
.hoverPrice a:first-child{
    position:absolute;
}
.hoverPrice a:first-child:hover + a{
    display:block;
}
.hoverPrice a:nth-child(2){
    display:none;
}
img{
    height:100%;
    width:100%;
}
.hoverPriceBg {
    padding:50%;
    position: absolute;
    z-index: 2;
    background-color: #033;
    -ms-filter: "alpha(opacity=50)";
    filter: alpha(opacity=50);
    opacity: .5;
}
.hoverPriceCirc {
    position: absolute;
    z-index: 3;
    padding:25%;
    text-align: center;
    background: #37c4f3;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
    -moz-box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
    box-shadow: rgba(0,0,0,0.2) 0 1px 3px;
    top:75px;
    left: 25%;
}
.hoverPriceCirc span {
    position: absolute;
    z-index: 4;
    color: white;
    width: 100%;
    top: 39%;
    left: 0;
    text-align: center;
    font-size: 2em;
}

Someone can help me please?

I don't know what I'm woing wrong.

Sign In

Hover Effect on product image shows price

Recommended Posts

Dan23

Link to comment

Share on other sites

vekia

Link to comment

Share on other sites

Dan23

Link to comment

Share on other sites

Dan23

Link to comment

Share on other sites

vekia

Link to comment

Share on other sites

Jiten rash (away)

Link to comment

Share on other sites

vekia

Link to comment

Share on other sites

Dan23

Link to comment

Share on other sites

Jiten rash (away)

Link to comment

Share on other sites

wmh90

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com