Docs

[JW & Co.]

Towards the top of the home page for verobeachwebsitedesign.net are these three images: http://prnt.sc/deyene.

Can you please tell me how to place these three icons on top of those images when you hover over them? The icons are placed in correspondence to which image they belong on top of in this visual aid: http://prnt.sc/deycay.

Icon #1: http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Website-Design-1-e1455660847253.png
Icon #2: http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Marketing-e1455660955650.png
Icon #3: http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Tools-e1455660895378.png

Thanks so much for your help!

[Rue Nel]

Hello There,

Thanks for writing in!

Do you want something like this?

If that is the case, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#x-section-2 .x-column.x-1-3 a:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center center;

    opacity: 0;
    transition: all 1s ease;
}

#x-section-2 .x-column.x-1-3 a:hover:before{
    opacity: 1;
}

#x-section-2 .x-column.x-1-3:nth-child(1) a:before{
    background-image: url(http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Website-Design-1-e1455660847253.png);
}

#x-section-2 .x-column.x-1-3:nth-child(2) a:before{
    background-image: url(http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Marketing-e1455660955650.png);
}

#x-section-2 .x-column.x-1-3:nth-child(3) a:before{
    background-image: url(http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Tools-e1455660895378.png);
}

Please let us know if this works out for you.

[JW & Co.]

Hello,

This looks fabulous except
#1 The icons are also being applied over the buttons right below in the images in that same section.
#2 Are the icons all the same size? It seems like the one in the middle is too small and the one on the far right is too large.

Thanks,
J

[Rue Nel]

Hello There,

Thanks for updating in!

Please have the code updated and use this instead:

#x-section-2 .x-column.x-1-3 .x-img-link:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center center;

    opacity: 0;
    transition: all 1s ease;
}

#x-section-2 .x-column.x-1-3 .x-img-link:hover:before{
    opacity: 1;
}

#x-section-2 .x-column.x-1-3:nth-child(1) .x-img-link:before{
    background-image: url(http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Website-Design-1-e1455660847253.png);
}

#x-section-2 .x-column.x-1-3:nth-child(2) .x-img-link:before{
    background-image: url(http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Marketing-e1455660955650.png);
}

#x-section-2 .x-column.x-1-3:nth-child(3) .x-img-link:before{
    background-image: url(http://verobeachwebsitedesign.net/wp-content/uploads/2016/02/Tools-e1455660895378.png);
}

In the code above, the image is set to have a width of 100 pixels. Roughly they are of the same dimension when gets displayed as a background. To be sure, please make sure that your icons is of the same size when you created theme or you might need to edit the image icons to be the same.

Hope this helps.

[JW & Co.]

This code works wonderfully!
Thanks!

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts