Docs

[[email protected]]

Hi,
I Have a block grid with 8 grid items (8 images) and i would like to add an effect on hover.
so i created an additional 8 images with a shadow. What can i do to create that effect

Thanks

Nick

my website is http://poplabicepops.com/

[Nico]

Hi There,

Thanks for writing in.

Add this in your customizer’s custom CSS:

.x-block-grid.eight-up .x-block-grid-item a img:hover{
box-shadow: 2px 6px 5px #888888;
}

Hope it helps.

Let us know how it goes.

Thanks.

[[email protected]]

That worked thank you,
But what i want to do is to change the images on hover for a diferent one,
Im using this CSS but is not working for some reason.

.watermelon {
background: url(http://poplabicepops.com/wp-content/uploads/2015/11/Watermelon-440-x-235-Close-up.png) no-repeat;
background-size: 100% 100%;
width: 440px; /* your icon width */
height: 235px; /* your icon height */
display: inline-block;
text-indent: 99999px;
overflow: hidden;
}

.watermelon:hover {
background: url(http://poplabicepops.com/wp-content/uploads/2015/11/Watermelon-440-x-235-Shadow.png) no-repeat;
}

Let me know

Thank you so much

Nick

[Paul R]

Hi Nick,

To make it work, you need to add a class first to your blockgrid item

http://screencast.com/t/Wt1fXSmZHU

Then change your css code to this.

.page-id-174 .x-block-grid.eight-up .x-block-grid-item:hover img {
    opacity:0;
}

.page-id-174 .x-block-grid.eight-up>li a {
    background:#fff;
}

.page-id-174 .x-block-grid.eight-up>li:hover a {
    background:trasparent;
}

/* Now add your sprecific background for each item */

.page-id-174 .x-block-grid-item.watermelon {
    background: url(http://poplabicepops.com/wp-content/uploads/2015/11/Watermelon-440-x-235-Shadow.png) top left no-repeat;
    background-size: 203px 110px;
}

Please do the same for other blockgrid items. Add class and add css code.

eg. Add class mango to your next block grid item
Then add this css code

.page-id-174 .x-block-grid-item.mango {
    background: url(http://poplabicepops.com/wp-content/uploads/2015/11/Mango-440-x-235-Shadow.png) top left no-repeat;
    background-size: 203px 110px;
}

Hope that helps.

[[email protected]]

Team,
Thank you for your feedback,
but still is not working 100%
please let me know

Thanks

Nick
http://www.poplabicepops.com

[[email protected]]

Any idea,
what can it be?
I put the code as instructed (see below)

.page-id-174 .x-block-grid.eight-up .x-block-grid-item:hover img {
opacity:0;
}

.page-id-174 .x-block-grid.eight-up>li a {
background:#fff;
}

.page-id-174 .x-block-grid.eight-up>li:hover a {
background:trasparent;
}

/* Now add your sprecific background for each item */

.page-id-174 .x-block-grid-item.watermelon {
background: url(http://poplabicepops.com/wp-content/uploads/2015/11/Watermelon-440-x-235-Shadow.png) top left no-repeat;
background-size: 203px 110px;
}

let me know

thanks

[Jade]

Hi Nick,

If you have this code in the customizer to set the background:

.page-id-174 .x-block-grid-item.watermelon {
    background: url(http://poplabicepops.com/wp-content/uploads/2015/11/Watermelon-440-x-235-Shadow.png) top left no-repeat;
    background-size: 100%;
}

To change the background image when you hover it, the CSS should be like:

.page-id-174 .x-block-grid-item.watermelon:hover {
    background: url(url_to_your_hover_background_image);
    background-size: 100%;
}

Then you can do the same process to the other boxes.

Hope this helps.

[Author]

Posts