I have the following html code :
.logo {
display: inline-block;
width: 30px;
position: absolute;
top: 50%;
opacity: 0;
transition: 0.6s;
}
.container:hover .logo {
opacity: 1;
transition: 0.6s;
}
.container:hover .picture {
filter: brightness(0.7);
transition: 0.6s;
}
<div class="container">
<div class="element-header">
<div class="element">Foo</div>
<div class="element">Bar</div>
</div>
<div class="loader"> </div>
<img src="logo.png" alt="" class="logo">
<img src="picture.jpg" alt="" class="picture">
</div>
When .container is hovered, I want .logo to be at opacity:1 and .picture to be at filter: brightness(0.7).
When a try to apply those properties one-by-one at .container hover, each is working. But when both are set-up, only the filter one is working.
If you set the position to relative instead of absolute, both images will display. As the code stood, one image was getting lost. (I substituted my own images in and added a picture class to size the image)
The transition works fine though!
Try below:
.logo {
display: inline-block;
width: 100px;
//height:auto;
position: relative;
top: 50%;
opacity: 0;
transition: 0.6s;
}
.picture {
width: 500px;
height: auto;
float: left;
}
.container:hover .logo {
opacity: 1;
transition: 0.6s;
}
.container:hover .picture {
filter: brightness(0.7);
transition: 0.6s;
}
<div class="container">
<div class="element-header">
<div class="element">Foo</div>
<div class="element">Bar</div>
</div>
<div class="loader"> </div>
<img src="https://www.dcu.ie/sites/default/files/afu_logo2_1.jpg" alt="agefriendly" class="logo">
<img src="http://www.rachelgallen.com/images/mountains.jpg" alt="Mountains" class="picture">
</div>
Fiddle here
Related
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 would like to include the mouseover 'Shop Now' effect on my images, I used this code:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:
What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?
<!DOCTYPE html>
<html>
<style>
.container {
width:300px; /*edited here*/
height:300px;
/*this syntax is for html tags ONLY: style= "width:300px;height:300px;"*/
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
you used the wrong syntax for css. style= "width:300px;height:300px;" would be correct if it was in your html like so:
<div class = "container" style= "width:300px;height:300px;"></div>
but in css the style is already implied throught the tags so in css all you need to do is:
.container{
width:300px;
height:300px;
/*and so on*/
}
note: to avoid future problems learn about chrome's inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Few short notes:
U cannot use style= "width:300px;height:300px;" within css. Within your example, your first line should be:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:
<div class="container" style="width:300px;height:300px;">
You furthermore don't really have to call width and height both, since an image will scale automatically when it has one of these.
With all this being said, I believe this code solves your problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>
I have put an image with a hover overlay on my html website, i wanted three of them side by side but when i try to add another it goes underneath the previous one instead of beside it.
I have tried float:left however this messes up the hover overlay.
Any ideas?
Try putting this code on its own html page, to make sure no other styles are affecting it:
<!DOCTYPE html>
<html>
<head>
<title>Images test</title>
</head>
<style>
.container {
position: relative;
width: 33.3333%;
float: left;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<body>
<h2>AUDIO SHOCK</h2>
<div class="container">
<img src="https://i2.wp.com/factschronicle.com/wp-content/uploads/2017/05/Bose-QuietComfort-35-Best-Wireless-Headphones-2017-min.jpg?fit=640%2C380&ssl=1" alt="Headphones" class="image">
<div class="middle">
<div class="text">Product Details</div>
</div>
</div>
<div class="container">
<img src="https://static.bhphotovideo.com/explora/sites/default/files/styles/960/public/_shure-aonic-50-wireless-headphones_lifestyle-004-16x9.jpg?itok=GpxHyHuY" alt="Other Headphones" class="image">
<div class="middle">
<div class="text">Product Details</div>
</div>
</div>
<div class="container">
<img src="https://nonstopnewcomer.com/wp-content/uploads/2017/02/headphones-1149205_640.jpg" alt="Other Headphones" class="image">
<div class="middle">
<div class="text">Product Details</div>
</div>
</div>
</body>
</html>
If you want them side by side, try
.image {
display: inline-block;
width: 33.3%
}
Not sure if you want the images side by side or not, so here's a general tip:
Some elements have display: block by default, and they won't ever be next to each other unless you specify. You can do this using display: inline-block; and specifying their width.
I have four equally sized images, all set to 20% width of the page
<div class="portrait">
<img src="#">
</div>
<div class="portrait">
<img src="#">
</div>
<div class="portrait">
<img src="#">
</div>
<div class="portrait">
<img src="#">
</div>
in my website that are horizontally aligned. On hover, I want the image to zoom inside the original border (like this https://codepen.io/math2001/pen/zZXBbj?editors=1100), which I did by a CSS3 transition and overflow: hidden.
.portrait {
float: left;
width: 20%;
overflow: hidden;
}
.portrait img {
width: 100%;
transition: transform 0.2s linear;
}
.portrait img:hover {
transform: scale(1.1);
}
The width of the image does not overflow past the original 20% constraint of the portrait, but the height does. I know the problem is that there is no fixed constraint for the height of the wrapper divs, but I don't know how to create one, since everything is percentage scaled. How can I fix this?
Put the transform on the container rather than the image:
.portrait {
float:left;
width:20%;
overflow:hidden;
transition:transform 0.2s linear;
}
.portrait img {
width:100%;
}
.portrait:hover {
transform: scale(1.1);
}
<div class="portrait">
<img src="http://placehold.it/250x250">
</div>
<div class="portrait">
<img src="http://placehold.it/250x250/000/ccc">
</div>
<div class="portrait">
<img src="http://placehold.it/250x250/aaa/eee">
</div>
<div class="portrait">
<img src="http://placehold.it/250x250/ccc/fff">
</div>
Did you try to use bigger definition for scale. For example:
.portrait:hover img {
transform: scale(1.4);
}
You need to set the img to display:block;
.portrait {
float: left;
width: 20%;
overflow: hidden;
}
.portrait img {
display: block; /* added property */
width: 100%;
transition: transform 0.2s linear;
}
.portrait:hover img {
transform: scale(1.4);
}
<div class="portrait">
<img src="http://placehold.it/250/f99">
</div>
I've been trying to make three images with a 'flipcard' effect for around a day and a half now and think I'm pretty close to a solution.
However, as you can see on the codepen, the only problem left is that when my images are in a static state (i.e. not being hovered over) you can still see the text lying on top of them.
I'd really appreciate it if anyone could come up with a way so that when the images are static, there is no text lying on top of them, but when they are hovered over they animate with the 'flipcard' effect - such as already occurs.
Basically, I'd just like the text hidden/removed when the images are in a static state but visible after the animation occurs - as if they were on the 'flipside' of the images! The rest is fine.
Appreciate any answers in advance, thanks guys! :-)
Codepen link - http://codepen.io/skoster7/pen/kkYEJk?editors=0100
HTML:
<div class="flexcontainer">
<div class="photo-container">
<div class="photo">
<img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front" />
<div class="photo-desc back">Christmas tree</div>
</div>
</div>
<div class="photo-container">
<div class="photo">
<img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front" />
<div class="photo-desc back">Happy Birthday</div>
</div>
</div>
<div class="photo-container">
<div class="photo">
<img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front" />
<div class="photo-desc back">Halloween</div>
</div>
</div>
</div>
CSS:
.flexcontainer {
display: flex;
perspective: 700px;
}
.photo {
position: relative;
z-index: 1000;
}
.photo-desc {
position: relative;
z-index: 100;
}
.photo-container {
position: relative;
margin-right: 10px;
transition-property: transform;
transition-duration: 2s;
transition-style: preserve-3d;
backface-visibility: hidden;
}
.photo-container:hover {
transform: rotateY(-180deg);
}
.back {
backface-visibility: visible;
position: absolute;
top: 10;
margin-top: -200px;
transform: rotateY(-180deg);
color: red;
}
The photo and back elements should be siblings (and not parent/child).
Here is a snippet (changed width/height of the elements to fit SO):
.flexcontainer {
display: flex;
perspective: 700px;
}
.photo {
width: 200px;
height: 150px;
transform: rotateY(0deg);
}
.photo img {
width: 200px;
height: 150px;
}
.photo-container {
transform-style: preserve-3d;
transition-property: transform;
transition-duration: 2s;
position:relative;
width: 200px;
height: 150px;
margin:10px;
}
.photo-container:hover {
transform: rotateY(-180deg);
}
.back {
transform: rotateY(180deg);
color: red;
}
.photo,
.back {
backface-visibility: hidden;
position:absolute;
left:0;
top:0;
}
.back {
transform: rotateY(180deg);
}
<div class="flexcontainer">
<div class="photo-container">
<div class="photo">
<img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front">
</div>
<div class="back">Christmas tree</div>
</div>
<div class="photo-container">
<div class="photo">
<img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front">
</div>
<div class="back">Happy Birthday</div>
</div>
<div class="photo-container">
<div class="photo">
<img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front">
</div>
<div class="back">Halloween</div>
</div>
</div>
And a working codepeng:
http://codepen.io/anon/pen/Egazvq?editors=1100
You can achieve this by adding display: none; to the .back class
and then adding a little something to your css:
.photo-container:hover .back {
display: block;
}
Here is an updated codepen as an example:
http://codepen.io/anon/pen/QKwRvA?editors=1100
Well, I enjoyed the challenge of this. I will go right ahead and add another solution for you.
.flexcontainer {
display: flex;
perspective: 700px;
}
.photo-desc {
position: absolute;
}
.photo-container {
position: relative;
z-index: 100;
margin-right: 10px;
transition-property: transform;
transition-duration: 2s;
transition-style: preserve-3d;
}
.photo-container:hover {
transform: rotateY(-180deg);
backface-visibility: visible;
}
.back {
position: absolute;
top: 10;
margin-top: -200px;
transform: rotateY(180deg);
color: red;
opacity: 0;
}
.photo-container:hover > .back {
opacity: 1;
transition: opacity 1s linear;
}
<div class="flexcontainer">
<div class="photo-container">
<img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front">
<div class="back">
Christmas tree
</div>
</div>
<div class="photo-container">
<img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front">
<div class="back">
Happy Birthday
</div>
</div>
<div class="photo-container">
<img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front">
<div class="photo-desc back">Halloween
</div>
</div>
</div>
Doing it this way, enables the text to "fade in" etc. Which i think looks kinda cool with your animation. I also got it so your images stay "appeared" when hovering over, rather than the flipside "disappearing" when animation is flipped.
As a side note: disappointed that others found another solution first :)