I'm sorry if this is a duplicate. I looked through the related posts and couldn't find anything similar to what I'm dealing with.
I have an image that when hovered on, the opacity reduces. I have text in a DIV above the DIV containing the image, which is affected by the opacity setting of the image. The text is suppose to stay solid, while the image becomes transparent. Unfortunately, both elements are becoming transparent on hover. I thought that since the text is considered a parent element, it should not be affected by the opacity setting of the image.
html:
<div class="album large">
<div class="writing">
<h1>blah</h1>
</div>
<div class="opac">
<img src="background/runaways.jpg">
</div>
</div>
CSS:
.album img
{
display:block;
margin: auto;
}
.album.large
{
background-image: url('background/bigblack.jpg');
background-repeat: no-repeat;
background-position: center;
margin-bottom: 50px;
}
.writing
{
position: absolute;
color:red;
left: 50%;
margin-left: -270px;
}
.opac img:hover
{
opacity: .4;
filter:alpha(opacity=40);
}
Solve opacity issue of parent div
Using Pseudo-elements we can get rid of this, Check the link given below for more details.
Related
I have a <div> with a background-image. When this is hovered over I would like another image to be placed on top partially transparent so the original image can be seen below.
My current idea involved adding a :hover state and changing the above images display state to visible along with necessary z-index values.
Could someone give me an example with jsfiddle.net implementation?
Why not use opacity?
The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.
The value applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
.myTransparentImage{
opacity: 0;
}
.myTransparentImage:hover{
opacity: 0.6; /* it's in pourcentage */
}
This way, the transparent image, on hover, will appear at 60% opacity so you can still see the one below. So it is on top of the other image the whole time but only appears once hovered.
Here is an example in a fiddle: https://jsfiddle.net/5ob6n7nq/
Whipped up a quick example for you. Hit "Run code snippet" to see it in action.
.image-holder {
background: url('http://i.imgur.com/5ln9Vmi.jpg');
height: 500px;
width: 500px;
position: relative;
}
.image-holder::before {
content: '';
background: url('http://i.imgur.com/khYHDfJ.jpg');
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.image-holder:hover::before {
opacity: .5; /* amount of opacity to blend the two images */
}
<div class="image-holder">
</div>
If I correctly understand you: https://jsfiddle.net/3jabz7d3/
<div class="block1">
<div class="block2"></div>
</div>
.block1 {
position: relative;
width: 200px;
height: 200px;
background: url(http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers-1080x675.jpg) no-repeat center center;
background-size: cover;
}
.block2 {
position: absolute;
width: 100%;
height: 100%;
background: url(http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg) no-repeat center center;
background-size: cover;
display: none;
opacity: 0.3;
}
.block1:hover .block2{
display: block;
}
I am creating a website, and I have an image at the top of my page. The image size is 1920x650 pixels. I am trying to code this correctly, and would like to know what is the best practice for placing images inside divs with heading text overlaying the image? I want the image to always be at 100% width, too.
Currently, I have tried this code, but when the image is at width:100%, and max-height: 600px; the size of the div cuts off the bottom of the image and butts up at the bottom of the heading text. I think it has something to do with my margin of the heading text. I am using a margin-top: -150px; for the heading, to achieve the text in the location where I want it to overlay on the image. Here is my code:
html:
<div id="welcome">
<img src="img/welcome.jpg" alt="Welcome">
<h2>Welcome to my website</h2>
</div>
with the css:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
}
#welcome img{
width: 100%;
}
#welcome h2{
margin-top: -150px;
color: #B0171f;
}
If I remove the margin-top: -150px; from my heading, the image fills up the div. Any help would be appreciated with what I am trying to achieve. Thank you in advance.
You should use the position instead of negative margin:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
position: relative; /* applied for parent div */
}
#welcome img{
width: 100%;
}
#welcome h2{
position: absolute;
top: 50px; /* change what position you need */
z-index: 2; /* higher than image layer */
color: #B0171f;
}
You can set the image as a background to the div welcome.Adjust the background-position to place the image at the desired position in the div using the css property
background-position
html
<div id ="welcome">
<h2>Welcome to my website</h2>
</div>
css
#welcome {
width:100%;
height: 600px;
overflow: hidden;
background:url('http://media1.santabanta.com/full1/Football/Football%20Abstract/football-abstract-9a.jpg') no-repeat;
}
#welcome h2 {
color: #B0171f;
}
DEMO
Read more on background-position
Using the CSS background-image property, you can achieve this with very little code. Just make it the background-image of the h2 itself.
HTML:
<h2 id="welcome">Welcome to my website</h2>
CSS:
<style>
#welcome {
width:100%;
background-image: url("http://www.tilemountain.co.uk/media/catalog/product/cache/1/image/1000x/040ec09b1e35df139433887a97daa66f/p/r/prismatics_prv4_victorian_maroon_200x100-1600.jpg");
color: #B0171f;
}
</style>
http://jsfiddle.net/#&togetherjs=DfmkLBOPVu
I don't think this is identical to the look you're currently going for, but it's a better foundation for what you're trying to do.
I have a strange problem with opacity property in CSS. So, I want a hover effect, image should get transparent green overlay. It seems that opacity is just applying to the overlay color(it turns lighter when you decrease opacity but image under the overlay does not appear). I have also tried to solve the problem with rgba, but no success.
It's a little hard to explain, so here is the fiddle: http://jsfiddle.net/4T3dc/3/
<style>
.col-sm-4 {
padding-top: 20px;
}
.col-sm-4 .img-responsive {
width: 350px;
height: 350px;
cursor: pointer;
}
.col-sm-4 .img-responsive#one-image {
background: url(http://shrani.si/f/e/jm/42FHXzWF/cover.png);
}
.col-sm-4 .img-responsive#one-image:hover {
background: #1abc9c;
opacity: 0.3;
}
</style>
<div class="row">
<div class="col-sm-4">
<div class="img-responsive img-rounded" id="one-image"alt="Responsive image">
</div>
</div>
</div>
Thank you!
You can add the green/opacity hover effect using :after.
Example on JSFiddle.
Make the following changes to your CSS:
.col-sm-4 .img-responsive#one-image {
position: relative;
}
.col-sm-4 .img-responsive#one-image:hover:after {
background: #1abc9c;
opacity: 0.3;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content:"";
}
What your CSS presently does isn't overlay a colour on the background image - instead, it completely replaces the background image with the colour you specify, and gives it an opacity. One way to achieve what you're suggesting is to use an actual <img> element, and use the background of its container (.col-sm-4 .img-responsive#one-image) to simulate an overlaid colour by changing the image's opacity.
So your HTML would shift slightly to:
<div class="row">
<div class="col-sm-4">
<div class="img-responsive img-rounded" id="one-image" alt="Responsive image">
<img src="http://shrani.si/f/e/jm/42FHXzWF/cover.png">
</div>
</div>
</div>
And your new CSS style definitions would be:
.col-sm-4 .img-responsive#one-image img {
width:100%;
}
.col-sm-4 .img-responsive#one-image {
background:#1abc9c;
}
.col-sm-4 .img-responsive#one-image:hover img {
opacity: 0.7; /* 1 - 0.3, where 0.3 is the desired opacity of the colour overlay */
}
Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.
If you are using CSS3 you can use -webkit-filter.
-webkit-filter: hue-rotate(240deg) saturate(0.6);
Like in this Fiddle: http://jsfiddle.net/4T3dc/6/
I am not entirely sure if that's what you want from your description. However, you can use this website to tweak effects to get exactly what you want:
http://html5-demos.appspot.com/static/css/filters/index.html
This is a slightly fiddly question- essentially, I am making a grid of images where a coloured overlay (div) is displayed upon rollover, with a bit of text within that div. This is very similar to this website- http://twoarmsinc.com/work/category/all. To do this with a div instead instead of an image would be easy- you would nest the overlay inside the other div and set width and height to 100%. However, since you can't nest within an image, and the image is responsively changing size, how should I go about this? I'm not sure background-image will work because I am using a responsive grid system (Simple Grid).
Here's a CodePen: http://codepen.io/anon/pen/iIsGm/
html:
<div>
<div class='overlay'></div>
<img src="http://placekitten.com/300/200" alt="thumb">
</div>
css:
.overlay{
width:100%;
height:100%;
background:#333;
position:relative;
z-index:10;
}
Apologies for the ambiguity- any and all help is greatly appreciated!
You will first need to swap .overlay with the img, so it comes second in the stack.
You have some options for the .container div, but you'll need to set a width to set up a grid. I didn't include it in the fiddle, but you will likely want to set img to max-width: 100%; width: auto; height: auto;, so they can resize and keep their aspect ratios when the browser is resized. For .container, you can also use float: left with a set width. I used display: inline-block here to reduce the amount of code.
DEMO
DEMO with multiple divs floating and simple grid
CSS:
.overlay{
background:rgba(0,0,0,0.5);
position:absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
color: white;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img {
display: block;
}
.container {
position: relative;
display: inline-block;
}
.container:hover > .overlay {
opacity: 1;
}
HTML:
<div class="container">
<img src="http://placekitten.com/300/200" alt="thumb">
<div class='overlay'>Some text</div>
</div>
I have a div (id=alertPanel) that I want to put in front of another div (id=captchaPanel). The captchaPanel div has an opacity of .25 -- but I want the front alert DIV tp be 100% opaque. (I am going for a lightbox-like effect). Both DIVs have IDs and are not in classes. I assign the back div an opacity of .25 and the front div an opacity of 1 -- but the front div still is not opaque (in Chrome and Safari at least... so likely also in FF and IE). I am making an ID-specific rule in a simple application of CSS, so I am confused about why I am getting this result.
Here is the HTML:
<div id='captchaPanel'>
<div id='alertPanel'>
in the middle
</div>
//some HTML
</div>
Here is the CSS:
#alertPanel
{
height: 10%;
width: 10%;
margin-left: auto ;
z-index:1;
margin-right: auto ;
position: absolute;
background-color:blue;
float:none;
opacity:1 !important;
}
#captchaPanel
{
height: 60%;
width: 57%;
background-color:#580200;
vertical-align:middle;
margin-left: auto ;
margin-right: auto ;
border-radius:15px;
opacity:.05;
z-index:-1;
}
A child will inherit the opacity of its parent.
If you are only using colors, change the #captchaPanel to use rgba:
background-color: rgba(0,0,0,.05);
fiddle
You could also change the markup so that alertPanelis not a descendant ofcaptchaPanel`
<div class="wrapper">
<div id='captchaPanel'>//some html</div>
<div id='alertPanel'>in the middle</div>
</div>
fiddle 2