I am attaching the image below ..Will any 1know how to give hover effect by css in this type of image
<a href="#top"><img class="popup1 img-1" src="assets/images/img-1.png" />
</a>
image
hover like this
if you have the two images, why not replace on hover. Dunno if that is what you meant in the first place.
.my-class:hover {
background-image: url('assets/images/img-2.png');
}
When you hover this will replace the imagine with the one you want.
What you want is to make a class to control the hover effect you want to add. This is done like so in CSS:
.classname:hover{
/*css stuff here*/
}
The recommended approach would be to have a different image after the user hovers over your image like so:
.classname:hover{
background-image: url('path to your image');
}
If you want to add an outline to the image then you can use drop-shadow, which is a quick-fix but I don't recommend, like so:
.classname:hover{
-webkit-filter: drop-shadow(1px 1px 0 yellow)
drop-shadow(-1px -1px 0 yellow);
filter: drop-shadow(1px 1px 0 yellow)
drop-shadow(-1px -1px 0 yellow);
}
Lets say you have this html file:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.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%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://combiboilersleeds.com/images/image/image-0.jpg" alt="" class="image" style="width:100%">
<div class="middle">
<div class="text">WOW Hover Effect</div>
</div>
</div>
</body>
</html>
This post has answer of how to make shadow for custom shape images, based on that you should be able to figure out how to make yellow shadow.
Drop shadow for PNG image in CSS
Here is an example of what you could do (just change the links to the area of your images and it should work.
JSFiddle
HTML
<a href="#top"><img class="popup1 img-1" src="https://i.stack.imgur.com/G9Sd7.png" />
</a>
CSS
.popup1:hover {
background-image: url(https://i.stack.imgur.com/D4EzQ.png)
}
Related
I am fairly new to HTML in the past month. I cannot for the life of me, figure out how to change the second image on hover to be a different image when the mouse hovers over it. I know some of the code probably looks dumb with how I tried to guess how I could possibly alter the second hover image. But I am quite confused. If anyone could help that would be great. The only progress I made so far is finally getting them perfectly aligned the way I would want them in the center and also the smooth transition to the hover. All that is left is being stumped on how to change the image to a different one when you hover over the second image. I do not want both hover images to be the same.
* {
background-color: coral;
}
.container {
position: relative;
width: 50%;
overflow: hidden;
display: table-cell;
border: 1px solid transparent;
/* a way to add a space around */
}
#media screen and (max-width:480px) {
.container {
/* make them full-width and one-a-row */
width: 100%;
display: block;
}
}
.image {
display: table-cell;
width: 100%;
height: auto;
transition: all .4s ease-in;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: .5s ease;
background-image: url("sketchcollage.JPG");
color: white;
text-align: center;
padding-top: 40%;
}
.overlay .overlay2 {
background-image: url("digitalartcollage.JPG");
}
a {
color: white;
}
.container:hover .overlay {
opacity: 1;
}
.container:hover .image {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
h1 {
text-align: center;
font-size: 72px;
background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1> Who is Rosalyn? </h1>
<div class="container">
<a href="https://trezoro.co">
<img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" class="image">
<div class="overlay">
<p>Entire element is the link here</p>
</div>
</a>
</div>
<div class="container">
<img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" class="image">
<div class="overlay">
<a href="https://trezoro.co">
</a>
</div>
<div class="overlay2">
<p>Only the text is a link </p>
</div>
</div>
I don't know what is p tags are for, so I removed those. Also, I used a div with background-image instead img tag. when you hover on the container, the image changes.
* {
background-color: coral;
}
.flex{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 50vh;
}
.container {
position: relative;
width: 48%;
overflow: hidden;
}
#media screen and (max-width:480px) {
.container {
width: 100%;
margin-top: 20px;
}
.flex{
height: 100vh;
}
}
.img{
background-size: 100% 100%;
transition: all .4s ease-in;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.img1{
background-image: url('https://s4.uupload.ir/files/5c29cf910a706_8m.jpg');
}
.img2{
background-image: url('https://s4.uupload.ir/files/717195_346_g0du.jpg');
}
a {
color: white;
}
.container:hover .img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
opacity: 0.5;
}
.container:hover .img1{
background-image: url('https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg');
}
.container:hover .img2{
background-image: url('https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg');
}
h1 {
text-align: center;
font-size: 72px;
background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1> Who is Rosalyn? </h1>
<div class="flex">
<div class="container">
<a href="https://trezoro.co">
<div class="img img1"></div>
</a>
</div>
<div class="container">
<div class="img img2"></div>
</div>
</div>
QUESTION
How to change the second image on hover to be a different image when the mouse hovers over it?
ANSWER
The approach of this question is to change an image when the user hovering the mouse over it. This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
.changeImg:hover {
background-image:
url("https://images.app.goo.gl/gfRnCCBPH6r4v3kp6");
}
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>
Having trouble trying to get a certain effect going on:
I have an image. I want to hover over it. It should turn a little black and have some text pop up.
example ^
What's the easiest/simplest setup to do this? Preferably only HTML and CSS
Note: The element needs a background-image being set in CSS.
.thumbnail {
background-image: url(potato.jpeg);
height: 400px;
width: 450px;
}
.thumbnail:hover {
background: rgb(0, 0, 0);
height: 400px;
width: 450px;
opacity: 0.5;
transition: 0.8s;
}
\
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="thumbnail"> </div>
</body>
</html>
You should use a seperate element for the overlay, in my example a child element. Only the hover status is visible, the regular status isn't, due to opacity: 0
.thumbnail {
background-image: url(https://placehold.it/450x400/fa0);
height: 400px;
width: 450px;
}
.overlay {
background: rgb(0, 0, 0);
height: 400px;
width: 450px;
opacity: 0;
transition: 0.8s;
}
.thumbnail:hover .overlay {
opacity: 0.5;
}
<div class="thumbnail"><div class="overlay"> </div> </div>
It becomes a bit more complex when text is involved which should have no opacity at all: In the following example the overlay element has a semi-transparent background-color and gets opacity: 1 when the parent is hovered. That way the text has no opacity when hovered, but the background still has due to its own opacity setting of 0.5:
.thumbnail {
background-image: url(https://placehold.it/450x400/fa0);
height: 400px;
width: 450px;
}
.overlay {
background: rgba(0, 0, 0, 0.5);
height: 400px;
width: 450px;
opacity: 0;
transition: 0.8s;
font-size: 36px;
color: #fff;
}
.overlay:hover {
opacity: 1;
}
<div class="thumbnail"><div class="overlay">SOME TEXT</div></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 try to tint an image with the background attribute like this:
.image-holder:hover {
opacity: 1;
transition: opacity 1s, background 1s;
background: #EBEFF7;
}
.image-holder {
height: 250px;
width: 200px;
opacity: 0.5;
transition: opacity 1s, background 1s;
}
<div class="image-holder">
<img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>
http://jsfiddle.net/6ELSF/1047/
But the image is not "tinted" like expected.
On hover it looks like this:
but I want it to look like this:
I tried to test some solution I found regarding overlay of images but neither worked in my example.
How do accomplish this in the least complicated manner?
I used some combined filters for tinting an image completely. Tinting is not possible directly (with filters), but you can paint it sepia, adapt saturation and brightness, and get the desired color by using hue-rotate... I think it was something like this ...
img {
filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
}
You will need to adapt it to your needs.
Depending on your browser support use filter, many options at your disposal, caniuse.com looks promising http://caniuse.com/#search=css%20filter :-
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
Using :before selector you can tint images with different colors
.image-holder {
height: 200px;
width: 200px;
position:relative;
}
.image-holder:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,255,255, 0.5);
transition: all .3s linear;
}
.image-holder:hover:before {
background: none;
}
<div class="image-holder">
<img src="http://lorempixel.com/200/200" />
</div>
You can achieve this using mix-blend-mode which currently has ~88% support. You can use the same markup as before.
<div class="image-holder">
<img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>
But use this css:
div.image-holder {
transition: background-color .2s;
width: min-content;
}
div.image-holder:hover {
background-color: #EBEFF7;
}
img {
display: block;
/* Blend with parents background: */
mix-blend-mode: multiply;
}
For this demo you are wanting to tint whites towards your chosen color so you want to use the multiply blend mode. If you are wanting to tint blacks then use the screen blend mode.
Codepen Demo
Changing the opacity of the parent container changes all children. make a separate div to control your tint. I hammered something together, but the essentials are there.
.image-holder {
position: relative;
max-height: 250px;
max-width: 200px;
}
.image-holder img {
display: block;
opacity: 0.5;
max-width: 100%;
max-height: inherit;
}
.tint {
position: absolute;
max-height: 250px;
max-width: 200px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
opacity: 0;
background: #00f;
transition: opacity 1s;
}
.image-holder:hover .tint {
opacity: 1;
}
<div class="image-holder">
<div class='tint'></div>
<img src="http://lorempixel.com/200/200" />
</div>
It's not exactly a real tint but this is the way I find easier to achieve a color layer over an image. The trick is to use an absolute layer with rgba color over an image. It works perfectly for my general cases.
Have a go!
.mycontainer{
position:relative;
width:50%;
margin:auto;
}
.overtint {
position:absolute;
background-color: rgba(255,0,0,0.6);
width:100%; height:100%;
}
img{ width:100%;}
a:hover .overtint {
background-color: rgba(0,255,0,0.6);
transition-duration: .5s;
}
<div class="mycontainer">
<a href="#">
<div class="overtint"></div>
<img src="https://via.placeholder.com/300x150">
</a>
</div>