How do I add a mouse over effect on photos?

[barichmon]

Hello, I am wanting to do a mouse over effect on photos. I really like how this site has their mouse over and would like to do the same thing. Any suggestions or what code to use in order to make this possible?

http://www.douksnow.com/gallery.html

[braybin · Accepted solution]

@barichmon

If you're looking for that exact mouse over on Weebly you can use the built-in gallery widget and set the caption settings:

Make sure "Display Caption on Hover" is checked and set "Thumbnail" to full. After clicking on a photo and setting its caption it will display as such on the live site.

If you only needed it for one image and wanted to use CSS for something similar you could follow this example from w3schools (main link for reference: https://www.w3schools.com/howto/howto_css_image_overlay.asp). I haven't tried it myself but it looks like it might be along the same line of thinking.  

[barichmon]

Thank you. I used your suggestion with the gallery option and got it to work. Mine doesn't look as clean as I would like but its better than nothing. 

Here is how mine turned out:

https://erwinrichmon.weebly.com/buy.html

vs. this is what I was wanting to accomplish

http://www.douksnow.com/gallery.html

Like I said, this will work for now. If you have any suggestions on how to get the desired result I would appreciate it. Thank you for the feedback!

[braybin]

@barichmon

After digging around the styles on that site you posted I was able to figure it out I think. It looks like your theme styles have made the hover behavior different so instead of a black background with opacity you got a white background. This style block should do the trick:

<style>

	/*Hover background color*/
	.galleryCaptionHolderInnerBg {

		top: 0 !important;
	    left: 0 !important;
	    width: 100% !important;
	    height: 100% !important;
	    background: black !important;
	    opacity: 0.6 !important;
	}

	/*Caption Text*/
	.galleryCaptionInnerText {

		color: #ffffff;
	}
</style>

If you copy this into the header/footer of your site (I usually propose using Settings > SEO and placing the styles within there) and refresh your page, the behavior you are looking for should be in place. Let me know how it works out.

[barichmon]

@braybin

yes that worked! Only minor issue now is that the font is black and not white, makes it hard to read the black. I tried changing the font color myself with no luck.

I went to Theme -> Change Fonts -> Media -> All 3 captions

None of those allowed me to change the font color. I even tried looking into the HTML code but couldn't figure out where the font color was written. Any suggestions on how to make the font white?

[braybin]

@barichmon

Try putting an '!important' next to the '#ffffff' style of the second section. That section should have changed the inner text to white but adding the extra '!important' like I had earlier should do it for you. Let me know if it still doesn't work and I will look into it again tomorrow.

[barichmon]

@braybin Got it! YOU! DA! MAN! (or WOMAN!). Thank you so much for your help. Turned out exactly how I wanted. Thank you, thank you, thank you! Here is the final product:

https://erwinrichmon.weebly.com/buy.html

[braybin]

@barichmon

That looks awesome! I'm glad that worked out for you 

[thefactory]

hello, i really like the mouse over effects you have for your site. i waat to do something similiar for my business site. can you assist?