Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jeremy Diallo
3,846 PointsTransparent foreground when hovering
Hi,
I'm looking for a way to create a transparent white foreground when hovering over an image with CSS (like in this website template http://fr.wix.com/website-template/view/html/689?utm_source=freewebsitetemplates&utm_medium=template_banner&utm_term=events&utm_content=ma_html_fwt_temp_1_5_creativeevents&utm_campaign=ma_fwt&experiment_id=ma_html_fwt_temp_1_4_creativeevents). I already tried this idea :
- Inserting the images as the background of an anchor displayed as block and giving the a element this CSS property on hover :
div a:hover {
background: rgba(255,255,255,0.3),
url(relative path);
}
But it didn't work...
Thanks for any tip :)
Jeremy Diallo
3,846 PointsHi Jake, no, my a tag is not wrapped around anything but I gived it a display: block; property and a height and width to work with.
7 Answers
richardwheeler
8,332 PointsMy apologies, still on my first cup of coffee. Yes, that would make a difference if you're trying to make multiple backgrounds but my suggestion was to test a single photo. I was attempting to have you remove the url deal and replace the comma with the proper closing syntax. My other thought is that you might not be providing enough specificity if to the backgrounds if the "div a:hoover {}" is all you're using.
richardwheeler
8,332 PointsLets go simple here. Try:
a:hover { opacity: 0.5; filter: alpha(opacity=50%);
Let me know if this works.
Jake Lundberg
13,965 PointsYou can only specify a background color for the last layer of a multi layered background. A color cannot be listed first like you are trying to do. Here is what I did to recreate it the same effect without using multiple backgrounds:
<div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQRi-yuMOZy_PKQko6j8p8cMrYLoJ4tacCU-wokVsRP07kukJ2d0g" />
</div>
div {
background: white;
width: 300px;
height: 300px;
}
img {
transition: .75s ease-in-out;
}
div:hover img {
opacity: .3;
}
hope this helps!
richardwheeler
8,332 PointsWhat web browser are you using? I looked up the link in Firefox and they work there sir.
Jeremy Diallo
3,846 PointsI'm using Firefox, but the website I pointed out is not my site, it's a template found on wix. I was trying to recreate the same effect on a page of my own :)
richardwheeler
8,332 PointsAh, yes, my bad. Hold tight a moment.
richardwheeler
8,332 PointsJeremy, first please make sure that you have spaces in-between the numbers like this: 255, 255, 255, 0.3). Secondly trying removing the comma at the end and remove the url deal ending the it with a semi-colon.
Jeremy Diallo
3,846 PointsSorry but I don't understand your second suggestion. Using a coma to indicate multiple backgrounds is the way to go according to the CSS courses on the website and the W3C (http://www.w3schools.com/css/css3_backgrounds.asp), and one should always end a CSS property with a semi-colon am I right ?
richardwheeler
8,332 PointsMy apologies, still on my first cup of coffee. Yes, that would make a difference if you're trying to make multiple backgrounds but my suggestion was to test a single photo. I was attempting to have you remove the url deal and replace the comma with the proper closing syntax. My other thought is that you might not be providing enough specificity if to the backgrounds if the "div a:hoover {}" is all you're using.
Jeremy Diallo
3,846 PointsOh, don't worry I am being more specific in my document, I have an id for my div and the image appears with no problem at all. But when hovering over it, nothing happens...
Jake Lundberg
13,965 PointsJake Lundberg
13,965 Pointsis your 'a' tag wrapped around anything?
I ask because currently you are trying to add these styles to the 'a' tag itself, and as it is in your code snippet above, it would not show up because 'a' tags are not block elements. To give a more clear answer, would need to see more of your code.