But I am struggling.
Code I have for css is:
#gallery img {
width:700px;
height:213px;
margin:0;
padding:0;
}
So I thought ...
#gallery img:hover {
width:700px;
height:213px;
position: relative;
z-index:10000;
background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center;
}
Would work, but it doesnt.
The image I am transparently overlaying on hover is:
What am I doing wrong.
I think I may have a corrupt css tag somewhere.
Any help appreciated.
Make the #gallery have a background image rather than having an image tag inside it... otherwise it'll be on top of the background. Then have another div inside it which has the :hover pseudo-class. If it still doesn't work, take out the word transparent.
Or you could not overlay the image and just swap the original image for the combined image?
Hello there
I think you misunderstood the mechanics of CSS:
The image itself is an object and the background specified goes behind it.
So you have to make the non transparent image the background and specify the transparent one in the src. However this won't suit your needs.
A workaround would with CSS would be troublesome, so i would suggest to swap the whole image with a css hover or javascript onMouseover or jQuery - get familliar with those since it's the proper way.
Fixed.
css:
#container { position:relative; width:700px; height:213px;}
.image { position:absolute; width:700px; height:213px; z-index:0;}
.overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;}
.overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;}
html:
<div class="overlay" ></div>
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div>
Related
Image cover the background color of DIV but text is showing.
My code is
<div id="testing">
<img src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?dpr=1&auto=compress,format&fit=crop&w=1350&h=&q=80&cs=tinysrgb&crop=">
<div id="sample">
Text
</div>
</div>
CSS is
#testing {
width: 200px;
height:150px;
}
img {
width:200px;
height:150px;
}
#sample {
margin-top:-15px;
background: black;
color: white;
text-align:center;
}
The result is showing like
You can find the code at
https://jsfiddle.net/cz605rc5/
It can solve with background css for div.
But I prefer to use img and want to cover black background label at the bottom of the image.
You can add a transparento overlay over your image tag since, it will be transparent the image will act as a background..
Fiddle
.overlay{
position:absolute;
top:0px;
left:0px;
width:100%;
min-height:100%;
}
Then you can move the text inside the overlay as you wish..
Since we are in 2017 i think you should first change the HTML code:
<figure>
<figcaption><span lang="en">image title</span></figcaption>
<img src="img.png" alt="Alternative Text" / >
</figure>
Now for CSS:
All you need is to make figcaption size as the image size.
Then make it position absolute, change it's z-index higher than the img, and set it's background to gradient.
Last thing is to place the span in some place: set it's position to "absolute" and place it (for example: left: 5px; bottom: 15px;)
If you want the full css just ask (:
Line height is causing the issue. You can add a line-height: 0; to #sample, or you can change the line height of the body. You could even enclose the text in some tags and apply it to that.
I found this effect on material.io: https://material.io/gallery/
The Image is fixed and is overwritten by the blackish one, but the z-index must be smaller than it, because the first bg is covering it.
In my pov its only working, when another div, without any opacity, blocks the first image.
Is that somehow possiboe or are they using a different method?
Edit: This is similar to parallax but not exactly parallax. If you inspect the html,you will see that the image/svg section doesn't scroll but the text does. By giving the svg sections different z-index values this is possible. The images are different in different sections, it's just that those are not moving along with text so it appears as if the images are repeating.
I would suggest you to go through their css to get a better understanding.
This effect is called parallax effect.
You can use a library like http://materializecss.com/parallax.html
to create it or you can create your own https://www.w3schools.com/howto/howto_css_parallax.asp
the two graphic elements are position:fixed each row that contains those graphics are incrementally positioned higher in the z-index and they have overflow:hidden set
body {
margin:0;
}
section {
height:100vh; position: relative; overflow:hidden;
}
section div {
position:fixed; top:50%; left:100px; width:100px; height:100px; border:2px solid white; margin-top:-50px;
}
section.red { z-index:1; }
section.blue { z-index:2; }
.red { background:red; }
.blue { background:blue; }
<section class="red">
<div class="blue"></div>
</section>
<section class="blue">
<div class="red"></div>
</section>
simplified example code: https://codepen.io/saetia/pen/mwBypp
I'm trying to use a CSS sprite on some anchor tags. However, when I load my page, what should be the "initial" icon doesn't show up!! Any ideas? I double checked my image paths and they are indeed correct. I'm not sure if my coordinates for the background position are 100% correct, but I figured I can tweak those once I actually get the icon to show up! Thanks!
HTML:
<div id="social">
</div>
CSS:
#social a.button{
width:150px;
height:150px;
display:block;
background-image:url('images/icons/behancesprite.png');
background-repeat:no-repeat;
background-position:0 0;
}
#social a.button:hover{
background-position: 0 -266px;
}
I have 2 divs inside a wrapper div and I was wondering if it's possible to bring the #wrapper div on top of the content (#outer and #inner).
<div id="wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>
I want the #wrapper to add a transparent background without making any changes to the HTML. I have tried doing so using z-index without success.
See this fiddle: http://jsfiddle.net/nPpDE/
Any help is much appreciated.
Managed it using :after- http://jsfiddle.net/t6mMR/ -No extra html!
Like this:
#wrapper:after {
position:relative;
top:-200px;
left:0px;
content:"";
width:400px;
height:200px;
display:block;
background:rgba(255, 0, 0,0.5)
}
The pseudo-element is placed above the others, and a semi transparent background applied to it.
__
EDIT: A slightly different way of doing it- (see comment below) (using position:absolute
http://jsfiddle.net/t6mMR/1/
__
Note- To be able to "click through" the pseudo-element, add pointer-events: none; to it.
http://jsfiddle.net/t6mMR/1/
To get this to work in IE, see css 'pointer-events' property alternative for IE, it may help.
You can give the children position: relative and z-index: -1 (or otherwise negative value), but I'm not sure how buggy that is or what the browser support is.
some more info available here: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Here's a quick example: http://codepen.io/Rykus0/full/jhwev
Otherwise, as others have said, you need to include a new element and position using either absolute or fixed
What you are asking is not possible.
However, it is possible when you add another div inside the #wrapper and position it with
position:absolute;
and give it a transparent color
http://jsfiddle.net/nPpDE/1/
EDIT: Harley's solution is better since the OP doesn't want to change the HTML
?? and what about having opacity colors on inner containers and regular color on main container:
#wrapper{
position:relative;
background:black;
width:400px;
height:200px;
}
#outer{
position:relative;
width:400px;
height:200px;
background: rgba(50,0,0,0.75);
}
#inner{
position:relative;
width:350px;
height:200px;
background:rgba(0,50,0,0.75);
margin: 0 auto;
}
fiddle that goes with it :) http://jsfiddle.net/nPpDE/2/
this is my first question on this website, hope someone can help me.
I have a parent div, which is a link to another page. There is a .png image within this div, and I want the background color of this png image to change when I hover over the parent div, and not just the image itself.
I want to do this in only HTML and CSS
Is this possible?
I think you are looking for something like, but the .png will need to be transparent to show the different background color
CSS:
#parent{
height: 400px;
width: 400px;
background-color: green;
}
img{
height:100px;
width:100px;
}
#parent:hover img{
background-color:white;
}
HTML
<div id="parent">
<img src="something.png" alt="1" />
</div>
jsFiddle Example
Its not possible to change img background using html css, if you want to the img background inherited from it's parent then use transparent background. welcome to SO !