I have a container with a background image that adds a semi-transparent background on hover. Here's my (simplified) HTML:
<div class="container">
<div class="overlay"></div>
<img src="hi.jpg">
</div>
Here's how I achieve the semi transparent overlay:
.container:hover > .overlay {
background-color: black;
height: 100%;
position: absolute;
width: 100%;
opacity: .2
}
However, when I hover over the container, not only is its background image affected by the black background, so is the image, as though the image were UNDER the overlay background, making it slightly darker. I tried remedying this by setting the image's z index to 3, but it is still darkened.
z-index only works on elements that are positioned, so give your image position: relative as well as increasing its z-index.
Related
I have an image element nested in a parent div. The parent has rounded corners and the image should adapt those. In case that the image doesn't load for some reason, a default background color should show. This is the general setup:
.parent {
border-radius: 10px;
overflow: hidden;
}
.child {
width: 100%;
height: 100%;
object-fit: cover;
background-color: red;
}
<div class="parent">
<img src="https://via.placeholder.com/150" class="child" />
</div>
I would expect the image to fill the entire container and not let any red color from the background show through, however the corners look like this:
As you can see, there is a thin red line visible at the rounded corners. This happens in Chrome and Firefox. How do I get rid of that and make the image properly fill the corners?
Bummer. You could transform: scale(1.05) as a way around it. Or put the image in the background of the parent. : /
Is it possible to have markup like this but also background overlay on hover?
<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="www.google.com">
<img src="http://placehold.it/300x300" />
</a>
</div>
</figure>
I tried placing background-color: #333 on .gallery-icon on hover, but only something like border-bottom appears?
http://codepen.io/filaret/pen/NRpVyr
You are definitely on the right track. Since you are using an :after element for the icon, you should leave that element alone since it's already positioned and defining its own width+height (based off the icon).
The reason the :after selector positions itself correctly is because it's not relying on its parent containers dimensions. You only have it as absolute from the top and left, which is fine. But it doesn't know about how tall it should be, because its parent has no defined height! If you use absolute positioning, you need to define the parent containers dimensions so that the child knows where its bounds are.
So first off, .gallery-icon is already a block element, so you don't need to define its width (its already 100% by nature), just the height:
.gallery-icon {
position: relative;
height: 100%;
}
Second, you should use a :before element to define a background, so that you don't have to mess with the :after icon:
&:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #333;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
Now, you just have to add the opacity change on hover!
&:hover {
.gallery-icon {
&:before {
opacity: .5;
}
&:after {
opacity: 0.6;
}
}
Hope that helps, here is a codepen forked off your original: http://codepen.io/anon/pen/JRWqxX
Edit: I also noticed that your img tag is causing it to go below the visual bottom of the container, a quick fix is just to add:
.gallery-icon {
img {
display: block;
}
You need to understand your markup works. Your image will be displayed on top of everything, and when you put a background colour on .gallery-icon that background colour will be under the image, and since the anchor link doesn't has a width and height, it only take a little bit of portion, that's why it showing a border bottom.
To create a background overlay on hover, you need to position it to be on top of the image.
Using pseudo element to create a background overlay:
&:hover .gallery-icon {
&::before {
content: '';
background-color: #333;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.2;
}
}
The pseudo element has a position absolute so it will displayed on top of the image. top, left, right and bottom 0 to tell the pseudo element to stretch it self as tall and as wide as the parent element.
Hope this helps.
I've tried to simplify the code a little bit. I hope it's what you've tried to achieve.
The trick is to place a as a independent element to img.
<figure class="gallery-item">
<img src="http://placehold.it/300x300">
</figure>
http://codepen.io/anon/pen/LRWoaR
The image (http://placehold.it/300x300) has a solid background colour, no?
That will block anything happening behind itself.
Above is a image that i found at udacity. I think inside that there is a png image which is bg-less, and that image's border is colored the same as that of background of the div.
How can i achieve that?
You would create a PNG image where the stroke of the illustration has a 50% opacity. Here's an example image:
And here's the same image with a colored background:
div {
display: inline-block;
background-color: #00a573;
}
<div>
<img src="http://i.stack.imgur.com/Il1Ur.png">
</div>
You make the image's border (black) opacity 50% (png needed for this) and the background color will shine through no matter what background color is used.
If the image is already fully transparent, with only a black border, you can use CSS and set opacity: 0.5 to an element like this
img {
opacity: 0.5;
}
div {
background-image: url(...);
opacity: 0.5;
}
I am trying to make an element opaque, that's in a <div> that is not opaque. I tried simply applying opacity: 1, but the background still showed through the element. I also tried adding !important to the attribute.
Thanks!
If the <div> has a background-color
Instead of using opacity on the <div>, you can use background-color: rgba(red, green, blue, alpha) to specify its background color. Just replace red, green, blue and alpha with their corresponding values.
If the <div> has a background-image
It is not trivially possible. But one workaround would be to have 2 <div>s, one over the other. The lower <div> would be non-opaque, and have a background. The upper <div> would have your content. Use z-index to place the div with the content above the div containing the background image.
Another workaround would be to actually have a transparent PNG image as the background-image of the <div>.
It is not possible, opacity is inherited (mandatory, cannot override), if the parent <div> you're using uses a background image, you have to move the element outside, maybe using absolute position, to locate it over the non-opaque one. If the parent <div> just have a color background and you make a percent transparent, easy!... you need to assign a RGBA color background (and opacity 1, of course).
I recommend a tool I've found useful: http://hex2rgba.devoth.com/ so you can calculate the rgba value properly. That's it
If your parent div simply has a background color or background image, then you can do something like this:
HTML:
<div id="parent">
<div id="child">
<span>Hello World</span>
</div>
</div>
CSS:
#parent{
width: 100px;
height: 100px;
position: relative;
}
#parent:after{
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background: url('someimage.png') no-repeat 0 0 transparent;
opacity: 0.7;
z-index: -1;
}
I have 40*40px png with transparent background with a 30*30px circle in the middle.
I would like to use that png as a button with a simple hover effect, but i want the hover effect to take place only when the cursor is actually on the circle, not on the transparent background.
Is there a plain HTML+CSS solution for this? I tried to check it here and on other forums, but I didn't find anything.
Yes, you can do this with HTML and CSS. First create a circle element and place it before your image. Then wrap both your image and the circle in a container, like this:
<div class="container">
<div class="circle"></div>
<img src="your-image.jpg" />
</div>
Then, use position: absolute to position the circle on top of the image (align it with the circle that's in the image), and use the + selector to select the next adjacent element when the circle is hovered.
.container {
position: relative;
}
.circle {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #222;
}
.circle:hover+img {
border: 5px solid aqua;
}
See DEMO.
Check out this script if you need to activate hover/click only when mouse is within the circle (and not in the square bounding box) http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/
It’s not possible in CSS only, as all elements are treated as rectangles, even if they are rendered with rounded corners.