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.
Related
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>
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>
I'm trying to force changing property position to change after certain part of time (after all animations will end). For this I've created sample codepen so you can see what I've already achieved (more-less):
transition: width 0.5s ease-in, height 0.5s, position 0s ease 0.6s;
https://codepen.io/anon/pen/xpQdZm
As you can see hovering on the green container triggers transition of inside container grow (from right to left). What I would like to do is to make the container decrease when we remove the hover effect but to keep the position set to absolute while transition still lasts but set position to static after all transitions ends.
The more illustrative example can be see here: https://codepen.io/anon/pen/VyVzed
Because of the changing of position from absolute to static when hover is missing, the images are flickering and it looks so ugly.
.container {
display: flex;
flex-direction: row;
width: 800px;
}
.container div {
position: relative;
flex: 1;
}
.container div img {
width: 200px;
transition: width 0.5s ease-out;
z-index: 100;
}
.container div img:hover {
height: 200%;
position: absolute;
width: 200%;
left: 0;
right: auto;
top: 0;
bottom: auto;
z-index: 200;
transition: width 0.5s ease-out;
}
.container:nth-of-type(even) div img:hover {
bottom: 0;
top: auto;
}
.container div:nth-of-type(even) img:hover {
left: auto;
right: 0;
}
<div class="container">
<div>
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
</div>
<div>
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>
<div>
<img src="http://images4.fanpop.com/image/answers/177000/177769_1287459785835_400_300.jpg">
</div>
<div>
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
</div>
</div>
<div class="container">
<div>
<img src="http://images4.fanpop.com/image/answers/177000/177769_1287459785835_400_300.jpg">
</div>
<div>
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
</div>
<div>
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
</div>
<div>
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>
</div>
I know I can set div to fixed height but the problem is I want images to be scaled by its width.
Instead of thinking about changing position why not changing how the animation works. You may try the use of scale and adjust transform-origin to decide how the image should move (and also optimize your markup)
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 400px;
}
.container img {
width: 100px;
height: 100px;
transition: 0.5s ease-out;
transform-origin: top left;
}
.container img:nth-child(even) {
transform-origin: top right;
}
.container img:nth-child(2n+5) {
transform-origin: bottom left;
}
.container img:nth-child(2n+6) {
transform-origin: bottom right;
}
.container img:hover {
position: relative;
z-index: 2;
transform: scale(2);
}
<div class="container">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/150/150/">
<img src="https://lorempixel.com/200/200/">
<img src="https://lorempixel.com/300/300/">
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
<img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
<img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
<img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>
I'm trying to position an image text overlay just above the image when it is hovered. top & bottom are not doing the trick.
Here's the code -
.projects {
padding-top: 50px;
}
.desktop-image {
position: relative;
}
.desktop-image:hover img {
-webkit-filter: blur(5px);
filter: blur(5px);
cursor: e-resize;
}
.desktop-image > img {
width: 700px;
}
.img_description {
position: absolute;
top: -13%;
bottom: 0;
left: 0;
right: 0;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity .7s, visibility .7s;
font-family: inherit;
}
.desktop-image > a:hover .img_description {
visibility: visible;
opacity: 1;
}
<div class="projects">
<div class="desktop-image">
<a class="desktop-image" href="https://www.stellamccartney.com/gb" target="_blank">
<img src="https://www.thesun.co.uk/wp-content/uploads/2017/08/nintchdbpict000342472436.jpg?strip=all&w=960&quality=100">
<p class="img_description">
An event directory that I<br> founded. Development, design &<br> content by me.
</p>
</a>
</div>
</div>
Use the position and width settings on .img-description as shown below. And since you use opacity 0 and 1, you can erase the visibility settings (or vice versa) The text centering is of course optional, as is the white text color (which does improve the visibility, though).
.projects {
padding-top: 50px;
}
.desktop-image {
position: relative;
}
.desktop-image:hover img {
-webkit-filter: blur(5px);
filter: blur(5px);
cursor: e-resize;
}
.desktop-image > img {
width: 700px;
}
.img_description {
position: absolute;
bottom: 13%;
left: 0;
right: 0;
width: 100%;
text-align: center;
color: #fff;
opacity: 0;
transition: opacity .7s, visibility .7s;
font-family: inherit;
}
.desktop-image > a:hover .img_description {
opacity: 1;
}
<div class="projects">
<div class="desktop-image">
<a class="desktop-image" href="https://www.stellamccartney.com/gb" target="_blank">
<img src="https://www.thesun.co.uk/wp-content/uploads/2017/08/nintchdbpict000342472436.jpg?strip=all&w=960&quality=100">
<p class="img_description">
An event directory that I<br> founded. Development, design &<br> content by me.
</p>
</a>
</div>
</div>
Like this?
The a tag was not taking the full height of the image tag because it was set to display:inline which does not have height and width, hence I changed it to display:inline-block so that it will have block properties too, then the element which had position:absolute was getting positioned as usual!
.projects {
padding-top: 50px;
}
.desktop-image {
position: relative;
display: inline-block;
}
.desktop-image:hover img {
-webkit-filter: blur(5px);
filter: blur(5px);
cursor: e-resize;
}
.desktop-image > img {
width: 700px;
}
.img_description {
position: absolute;
top: -13%;
bottom: 0;
left: 0;
right: 0;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity .7s, visibility .7s;
font-family: inherit;
}
.desktop-image > a:hover .img_description {
visibility: visible;
opacity: 1;
}
<div class="projects">
<div class="desktop-image">
<a class="desktop-image" href="https://www.stellamccartney.com/gb" target="_blank">
<img src="https://www.thesun.co.uk/wp-content/uploads/2017/08/nintchdbpict000342472436.jpg?strip=all&w=960&quality=100">
<p class="img_description">
An event directory that I<br> founded. Development, design &<br> content by me.
</p>
</a>
</div>
</div>
References:
Inline height and width
I agree with #Naren's answer. Just wanted to show the change when I edited the style in Devtools:
Few more changes to .image-description would give you the desired o/p:
remove top property
set bottom: 100%
set padding-bottom: 0 if you want image to be strictly aligned with top of image
What I am trying to do is, when the user hover on the image the image should reposition along the x-axis and it should reveal the .content. i have set z-index: 10 to image and z-index: 1 to .content to make .content to be underneath the image. but .content still remains on top of the image. Please help me..
Here is my code:
html
<div class="holder">
<img src="http://placehold.it/350x150" />
<div class="content">
<h3>hello there</h3>
view more
<div/>
</div>
css
.holder {
margin-top: 130px;
position: relative;
}
img {
display: block;
transition: -webkit-transform 0.5s;
transition: -moz-transform 0.5s;
z-index: 10;
}
.content {
background: blue;
height: 100%;
color: white;
z-index: 1;
position: absolute;
top: auto;
bottom: 0;
}
a {
color: white;
background: red;
padding: 10px;
}
.holder:hover img {
-webkit-transform: translateX(90px);
-moz-transform: translateX(90px);
}
Here I corrected issue of my code thanks to Jones G. Drange. As he pointed out in his comment
"z-index can only be modified in elements with a position other than static. Your img has position: static by default"
jsfiddle
img {
position: relative;
}