This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I'd like text to appear on the right side of a logo when the person moves the cursor over the logo. I checked out other similar questions and tried their solutions and it still doesn't work. When I hover over the logo, nothing appears. When I check the inspector, the browser doesn't seem to read the hover effect. Its still reading opacity:0 and visibility:hidden.
.logo {
display: block;
width: 90px;
}
.puneet-name {
position: absolute;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
}
.logo img:hover .puneet-name {
visibility: visible;
opacity: 1;
}
.header_menu {
padding: 25px 0;
z-index: 12;
margin-right: 2px;
margin-left: 0.1px;
}
<div class="header_menu row d-flex align-items-center justify-content-between">
<a class="logo" href="#">
<img src="images/PS_logo.png" alt="logo"/>
</a>
<div class="hover-text lineHeading">Person Name</div>
</div>
Text will show when hovering over the image
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.hover-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .hover-text {
opacity: 1;
}
<div class="container">
<a class="logo" href="#">
<img src="images/PS_logo.png" alt="logo" class="image"/>
</a>
<div class="hover-text">
<div class="text">Person Name</div>
</div>
</div>
Related
This question already has answers here:
How to overlay images
(11 answers)
Closed 2 years ago.
I am trying to add an overlay effect for each image on a webpage. Basically when the cursor is moved over the image, it will slightly change color. However the desired effect is not occurring. What is the best way to fix this?
Here is a picture of the webpage for context.
HTML
<div class="service-box">
<div class="single-service">
<img src="images/facials.PNG">
<div class="overlay"></div>
</div>
<div class="single-service">
<img src="images/skin_solutions.PNG">
<div class="overlay"></div>
</div>
<div class="single-service">
<img src="images/lash.PNG">
<div class="overlay"></div>
</div>
<div class="single-service">
<img src="images/microblading.PNG">
<div class="overlay"></div>
</div>
<div class="single-service">
<img src="images/eyebrow_treatment.PNG">
<div class="overlay"></div>
</div>
</div>
CSS
.service-box{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: auto;
}
.single-service{
flex-basis: 50%; /*get two services in 1 row*/
text-align: center;
border-radius: 7px;
margin-bottom: 20px;
color: #fff;
position: relative;
}
.single-service img{
width: 85%; /*resize image*/
border-radius: 7px;
}
.overlay{
width: 100%
height 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5),#93dced);
opacity: 0;
transition: 1s;
}
.single-service:hover .overlay{
opacity: 1;
}
This will make your images 60% transparent when hovered over.
img:hover {
background: linear-gradient(rgba(0,0,0,0.5),#93dced);
opacity: 60%;
transition: 1s;}
Your code works well, but there is a technical error in the css, in the .overlay class. You skipped it ; after width: 100%, and missed : between height: 100%.
It should be like this:
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5),#93dced);
opacity: 0;
transition: 1s;
}
I'm working on my portfolio site now. My projects are listed as clickable images, arranged into two columns. I want it that when a user hovers over an image, a solid block of color covers it with the project title in the center. Basically like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade.
I had it working perfectly when I used row/column css classes, but since I've found that to not be very responsive (on mobile, the first column gets stacked on top of the other, which makes sense but that's not the order I want), I aligned the images with float and padding instead. Now, the hover effect/link stretches across the entire page, instead of being contained in the image area.
Here's my code for reference:
CSS
.container {
position: relative;
}
.image {
display: block;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 30px;
font-family: "Lato-Bold";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#media screen and (min-width: 1025px) {
.image {
float: left;
width: 45%;
padding-left: 40px;
padding-right: 15px;
padding-bottom: 30px;
}
}
HTML
<div class = "container">
<img src="image name" class = "image">
<div class="overlay" style = "background-color: #color;">
<div class="text">project title</div>
</div>
</div>
How can I fix this? I've tried adding display: block to the .overlay class. I've tried making the .overlay class the same size as the image. I've also tried wrapping the link around the container class instead of the other way around like it is now. Nothing happens at all. I've also tried adjusting the container size, but that shrunk the images and stacked them into 1 column :(
Read about Responsive Images and Flexbox
Try the following code.
Note: I changed the HTML structure slightly.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.thumb {
position: relative;
width: 50%;
}
.thumb img {
width: 100%;
}
.thumb:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
color: #000;
background: #fff;
}
.overlay .text {
position: absolute;
top: 50%;
transform: translate(-50%);
left: 50%;
text-align: center;
}
<div class="container">
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
</div>
I've made a responsive image grid and am trying to add a hover effect to it so that the image gets a dark overlay and some text fades in on it. However, I've been having a tough time implementing it.
Here's my HTML structure.
<div class="tile">
<img src="some_image" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
And here's my CSS
.gallery .row .tile:hover ~ .tile img {
transform: scale(1.2);
}
However upon hovering over the image, it does not have the expected behaviour.
What's wrong?
EDIT
I got the hover effect to work and I can now fade in text.
Here's my code for that:
<div class="tile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
<div class="overlay">
<div class="text">Mahatma Gandhi</div>
</div>
</div>
CSS
.tile {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.8);
}
.tile:hover .overlay {
opacity: 1;
}
This seems to work but I think it doesnt have a certain "feel" to it. So I need to add a scale effect to the image. How can I do that
Here is a jsFiddle that i think will help you to resolve your issue: https://jsfiddle.net/mcs3yn1x/
HTML
<div class="tile">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
CSS
.tile {
border: 2px solid black;
}
.tile:hover img {
transform: scale(1.2);
}
Edit
After hearing alittle more about your issue I have created the following jsFiddle: https://jsfiddle.net/f1gzonjr/4/
HTML
<div class="tile">
<div class="container">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
</div>
CSS
.tile {
position: relative;
top: 0px;
left: 0px;
height: 300px;
width: 200px;
overflow: hidden;
border: 2px solid black;
}
.container:hover img{
transform: scale(1.2);
}
.overlay{
position: absolute;
display: none;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
}
.overlay p {
position: relative;
text-align: center;
color: #fff;
}
.tile:hover .overlay{
display: block;
}
Here is an alternate solution. Not sure if its what you wanted.
.tile:hover img, .tile.hover img {transform: scale(1.2);}
Here is the original answer that I adapted: Change background color of child div on hover of parent div?
-----EDIT-----
To stop it scaling and breaking responsiveness you will need to add a container around the image and then set overflow to none.
HTML:
<div class="tile">
<div class="img-container"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="animate"></div>
<div class="overlay">
<p>Mahatma Gandhi</p>
CSS:
.img-container{
width: 500px;
height: 500px;
overflow: hidden;
}
.tile:hover img, .tile.hover img {
transform: scale(1.2);
}
See the codepen below for an example
https://codepen.io/jamesCyrius/pen/pooqwwv
Here is a code
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 15px;
height: 15px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
<div class="zoom"></div>
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.