Suppose I have an image. I want to display an div on the image with same width and same height of the image when I put the cursor on the image. Background of the div will be black included with opacity .6. AT first Below I included an code, but it is not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.under_menu{
width: 400px;
height: 400px;
background-color: black;
opacity: .5;
position: absolute;
display: none;
}
.image:hover .under_menu{
display: block;
margin-top: -20px;
}
.main_menu{
position: relative;
display: inline-block;
}
</style>
</head>`
<body>
<div class="main_menu">
<img src="com22.jpg" class="image" width="400" height="400" alt="" />
<div class="under_menu"></div>
</div>
</body>
</html>
Give top: 0; left: 0; pointer-events: none to .under_menu and change .image:hover .under_menu to .image:hover ~ .under_menu and it will work fine.
The ~ is the sibling selector, which is needed, as .under_menu is not a child of the .image, and the pointer-events: none make it not flicker, as it takes away pointer events from the .under_menu.
This could be done using pseudo element as well, showed in my 2:nd sample.
.under_menu{
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: black;
opacity: .5;
position: absolute;
display: none;
pointer-events: none;
}
.image:hover ~ .under_menu{
display: block;
}
.main_menu{
position: relative;
display: inline-block;
}
<div class="main_menu">
<img src="http://lorempixel.com/400/400/city" class="image" width="300" height="300" alt="" />
<div class="under_menu"></div>
</div>
2:nd sample (using pseudo element)
.main_menu {
position: relative;
display: inline-block;
}
.main_menu:hover::after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: .5;
position: absolute;
}
<div class="main_menu">
<img src="http://lorempixel.com/400/400/city" class="image" width="300" height="300" alt="" />
</div>
The issue is that .image:hover .under_menu will never work because this is telling the CSS that one hover of .image its "child" .under_menu should do something but .under_menu is not a child its a sibling so you have to do .image:hover + .under_menu.
Or if you don't have any other elements inside you can do .main_menu:hover .under_menu.
https://jsfiddle.net/up4oswLm/
Related
This question already has answers here:
How to overlay images
(11 answers)
Closed 5 years ago.
I want to highlight an image when a user hovers over it.
To do that, I'd like to put an overlay over everything else (or honestly, I'd be happy putting an overlay over everything including the image, and then putting something to brighten the image as well).
Is there anyway to do this without JS? I'm happy to use a JS solution if that's all that's available, but I was wondering if there was any CSS-only trickery that could manage to do this.
Example HTML would be like this:
<body>
<div>
<Other Elements />
<img src="...." />
</div>
</body>
Preferably everything would be darkened except the <img> tag.
You could use a sibling selector: .container img:hover ~ .overlay { background-color: rgba(0,0,0,0.8); }
body {
}
.container {
position: relative;
text-align: center;
margin: 10px auto 0;
padding-bottom: 10px;
}
.container .other {
display: inline-block;
margin: 20px 10px 10px;
width: 100px;
height: 100px;
background-color: darkorange;
z-index:1;
}
.container img {
display: inline-block;
margin: 10px 10px 10px;
z-index:1;
position: relative;
transition: all 300ms ease;
}
.overlay {
background-color: rgba(0,0,0,0);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
z-index:1;
transition: all 300ms ease;
}
.container img:hover ~ .overlay {
background-color: rgba(0,0,0,0.8);
}
.container img:hover {
z-index: 2;
transform: scale(1.1);
cursor: pointer;
}
<body>
<div class="container">
<div class="other"></div>
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=2" />
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=4" />
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=6" />
<img src="https://picsum.photos/100/100?image=8" />
<div class="overlay"></div>
</div>
</body>
I've implemented a hover state that overlays text when a div is hovered.
Here is the code -
.desktop-image {
position: relative;
}
.img_description {
position: absolute;
top: -13%;
bottom: 0;
left: 0;
right: 0;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity .7s, visibility .7s;
}
.desktop-image:hover .img_description {
visibility: visible;
opacity: 1;
}
<div id="images" class="misma">
<div class="desktop-image">
<img src="http://via.placeholder.com/200x200">
<p class="img_description">This image looks super neat.</p>
</div>
<div class="mobile-image-misma">
<img src="http://via.placeholder.com/100x100">
</div>
</div>
The problem
When I inspect the page I notice that the div .desktop-image is taking up the full width of the screen (see pic).
Question
How can I make this div wrap to the size of the actual image, so that the hover state is ONLY implemented when that image is hovered, as opposed to when anywhere within the blue section is hovered.
Thanks
By default div's are defined with display: block, meaning that they will take the entire available width.
You can specify that .desktop-image will be display: inline-block; and you will get the wanted result.
My suggestion to you is to use semantic HTML, there are 2 element that are dedicated to what you trying to achieve figure & figcaption.
Added an example with them.
.desktop-image {
position: relative;
display: inline-block;
}
.desktop-image img {
vertical-align: middle;
}
.img_description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity .7s, visibility .7s;
}
.desktop-image:hover .img_description {
visibility: visible;
opacity: 1;
}
<div id="images" class="misma">
<div class="desktop-image">
<img src="http://via.placeholder.com/200x200">
<p class="img_description">This image looks super neat.</p>
</div>
<div class="mobile-image-misma">
<img src="http://via.placeholder.com/100x100">
</div>
<figure class="desktop-image">
<img src="http://via.placeholder.com/200x200">
<figcaption class="img_description">This image looks super neat.</figcaption>
</figure>
</div>
Please see this.
.desktop-image {
position: relative;
display: inline-block;
}
.img_description {
position: absolute;
top: -13%;
bottom: 0;
left: 0;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity .7s, visibility .7s;
right:0;
}
.desktop-image:hover .img_description {
visibility: visible;
opacity: 1;
}
<div id="images" class="misma">
<div class="desktop-image">
<img src="http://via.placeholder.com/200x200">
<p class="img_description">This image looks super neat.</p>
</div>
<div class="mobile-image-misma">
<img src="http://via.placeholder.com/100x100">
</div>
</div>
By default div tag has a default display property display: block
In your code
<div class="desktop-image"> div appear full width of the display
set a width: and a min-height: property to solve the problem
.desktop-image {
position: relative;
width: 200px; /*new*/
height: 200px; /*new*/
}
Add CSS property clear: both to the div with the class desktop-image.
Specify the width of the .desktop-image class in percentage like .desktop-image{width:70%;} or whatever percentage suit the page design.
By doing that image will remain in this .desktop-image div.
I've gone through a lot of the resolved questions with a similar title but nothing I try seems to work.
I want the ava.png image to redirect to another page, but on hover I want a :before image (ava_background_hoover.png) to show up.
I may be going about it all wrong, but this is what I have so far:
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
position: absolute;
z-index: -1;
}
#slide2 {
opacity: 1;
position: relative;
z-index: 2;
margin-left: 7px;
margin-top: 0px;
}
#slide3 {
z-index: -1;
position: absolute;
}
<section id="header">
<div class="inner">
<img id="slide1" src="https://www.upload.ee/image/6050955/ava.png"/><img id="slide2" src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
</div>
</section>
Fiddle
You can set #slide1:before's content as the default image. Then, on :hover, change the content attribute to the hover image.
If you do so, you need to change the img to a div (or span, just not an img).
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
display:inline-block;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:after {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
position: absolute;
z-index: -1;
}
#slide2 {
opacity: 1;
position: relative;
z-index: 2;
margin-left: 7px;
margin-top: 0px;
}
#slide3 {
z-index: -1;
position: absolute;
}
<section id="header">
<div class="inner">
<a id="slide1" href="http://google.com" target="_blank"></a>
<img id="slide2" src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
</div>
</section>
Working demo including the link: http://output.jsbin.com/cudimos
the :before and :after pseudo-elements are used to insert content before, or after, the content of an element . img doesn't have content. so you can't use pseudo-elements on img .
instead, you should use <div> with ids #slide1 and #slide2 in which you put img or use background-img on that divs , you choose.
i made a simple example below. click to show snippet. let me know if it helps
P.S. you can position the :before how you want. i just guessed how you wanted it
#slide1,#slide2 { display:inline-block}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
position: absolute;
z-index: 1;
right: -150%;
bottom: -150%;
}
<section id="header">
<div class="inner">
<div id="slide1">
<img src="https://www.upload.ee/image/6050955/ava.png"/>
</div>
<div id="slide2">
<img src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
</div>
</div>
</section>
I want to hover over my image and have the text appear in place of image
but I don't want to use jQuery or JavaScript .
#wrapper .text {
position: relative;
bottom: 30px;
left: 0px;
visibility: hidden;
}
#wrapper:hover .text {
visibility: visible;
}
<div id="wrapper">
<img src="kero.png" class="hover" height="200px" width="200px/>
<p class="text">text</p>
</div>
Not sure if I understand correctly what you want, but does this work for you?
Initial Case
#wrapper {
position: relative;
}
.text {
opacity: 0;
position: absolute;
bottom: 0;
}
.hover:hover {
opacity: 0;
}
.hover:hover + .text {
opacity: 1;
}
<div id="wrapper">
<img src="http://placehold.it/200x200" class="hover" />
<p class="text">text</p>
</div>
Extended Case
#wrapper {
display: inline-block;
position: relative;
}
.text {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity .5s;
background: rgba(0, 0, 0, .5);
color: white;
margin: 0;
padding: 10px;
}
.hover {
display: block;
}
#wrapper:hover .text {
opacity: 1;
}
<div id="wrapper">
<img src="http://placehold.it/200x200" class="hover" />
<p class="text">text</p>
</div>
Working fiddle : https://jsfiddle.net/2y67zerm/
U can use either display or visibility attributes
#wrapper .text {
position: absolute;
bottom: 30px;
left: 10px;
top:10px;
visibility: hidden;
display:none;
}
#wrapper:hover .text {
visibility: visible;
display:block;
z-index:1000;
}
<div id="wrapper">
<img src="kero.png" class="hover" height="200px" width="200px" />
<p class="text">text</p>
</div>
Look at this,
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover
This is an example of "hover".
Let me know if this helps you out.
Thanks
#wrapper{
position:relative;
}
#wrapper .text {
position: absolute;
bottom: 30px;
left: 0px;
visibility: hidden;
}
#wrapper:hover .text {
visibility: visible;
}
#wrapper:hover img{
visibility: hidden;
}
This can be achieved using the display css attribute.
#wrapper p { display: none; }
#wrapper:hover img { display: none; }
#wrapper:hover p { display: block; }
Your example had unecessary classes so they have been removed.
Solution:
<style>
#wrapper p { display: none; }
#wrapper:hover img { display: none; }
#wrapper:hover p { display: block; }
</style>
<div id="wrapper">
<img src="http://i.imgur.com/UHqk6nC.jpg" />
<p>Some text</p>
</div>
See this fiddle for an example: https://jsfiddle.net/nt5vjywu/
Hope that helps!
UPDATE:
Updated fiddle with hovering text on top. Note the reorder of the img and p tag.
https://jsfiddle.net/nt5vjywu/2/
I want to simply overlay these 4 images with a block of colour, and text aligned in the middle of each. But with my current use of "position: absolute" to get each image in the correct position and z-index etc. I'm finding it hard to attempt something like this: http://jsfiddle.net/jimjeffers/mG78d/1/ and get it to work. My position absolute seems to always break other code I've been trying from stackoverflow and others, even tried a few jquery scripts.
Live URL: http://bit.ly/1k7RgDS
HTML
<div class="index-gallery">
<img src="<?php HTTP_HOST ?>/Images/1.JPG" alt="" class="img1" />
<img src="<?php HTTP_HOST ?>/Images/2.JPG" alt="" class="img2" />
<!-- <img src="<?php //HTTP_HOST ?>/Images/3.JPG" alt="" class="img3" /> -->
<img src="<?php HTTP_HOST ?>/Images/6.JPG" alt="" class="img3" />
<img src="<?php HTTP_HOST ?>/Images/5.JPG" alt="" class="img4" />
</div>
CSS
#index-gallery .index-gallery { margin-bottom: 30px; }
#index-gallery .index-gallery img:hover { opacity:0.6; filter:alpha(opacity=40); /* For IE8 and earlier */ }
#index-gallery .index-gallery img:before { content: "Show Home Hemel Hempstead"; }
#index-gallery .index-gallery .img1 { width: 550px; top: 10px; position: absolute; z-index: 3; display: block; }
#index-gallery .index-gallery .img2 { width: 550px; right: 0; position: absolute; z-index: 2; display: block; }
#index-gallery .index-gallery .img3 { width: 400px; top: 400px; left: 10px; position: absolute; z-index: 4; display: block; }
#index-gallery .index-gallery .img4 { width: 710px; top: 400px; right: 0; position: absolute; z-index: 1; display: block; }
I've got a little bit of a transparency code to work but looking more for what's on that JSFIDDLE with the ability to center the text in the middle when hovered over with colour overlay. If you have a suggestion which would change all the code I don't mind, if this is bad practice what i've got so far.
So - Working with what you already have you could just try this route. Minimal position changes and I've added Paragraph tags inside your spans so you can position the text absolutely.
http://jsfiddle.net/9H7eM/
<span><p>Hello</p></span>
#overlay {position: relative;}
#overlay span {
background: red;
bottom: 0;
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#overlay span p {
position: absolute;
text-align: center;
width: 100px;
top: 30px;
font: bold 16px arial;
}
IF you're open to changing your code, you could try an approach similar to this: http://jsfiddle.net/te6t8/1/
But if you're already happy with how it is, stick with what you have and know!