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>
Related
Here is a link to a demo
I'm not sure what I'm missing, I've done this before a few times but It's been a day of fighting this particular CSS. I want the image to enlarge, but stay within the dimensions, so a zoom effect versus any enlargement. I've attempted to move the overflow:hidden into other parent or children, but it doesn't have an effect. I've played around with the display settings as well.
Any advice? The JSfiddle link is above, and the code below. Thanks for taking a look!
#purple-square {
width: 355px;
height: 255px;
background-image: url("../img/website_cards/purple_card.png");
border-radius: 10px;
}
#migraine-dentistry {
width: 355px;
height: 255px;
background-image: url("../img/website_cards/migraine_dentistry_card.png");
border-radius: 10px;
}
/* need position: relative in shell otherwisee the elements disappear */
#shell {
margin: auto;
width: 355px;
height: 255px;
position: relative;
transform-origin: center;
transition: 0.3s ease-in-out;
}
#shell:hover {
transform: scale(1.2);
}
#container {
width: 100%;
overflow: hidden;
display: inline-block;
transition: 0.3s;
margin: 0 auto;
}
#container div {
position: absolute;
left: 0;
transition: 0.3s ease-in-out;
}
#container:hover {
transition: ease-in-out 0.3s;
}
#container div.bottom:hover {
opacity: 0;
}
and here is the HTML setup:
<body>
<div id="shell">
<div id="container">
<div id='purple-square' class="top"></div>
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
Full working code snipped below my steps
remove unnecessary elements Removed purple square, because it's never seen in wanted animation.
Removed the part the full #container div.bottom:hover part.
Removed every style that begins with #shell in the css and later trigger the animation on #container:hover.
main issue Add an #migraine-dentistry after the #container:hover animation, so if someone hovers the container it effects the #migraine-dentistry element. (#container:hover #mi.. {trans..})
In this (#container:hov..) element remove everything and
insert transform: scale(1.2);
because we just want to scale if user is hovering.
Remove whole #container div {..} style element, because we will directly add these styles to the #migraine-dentistry element.
In #container define px values for
> width: 355px; and height: 255px;
just because we not use the #shell element anymore. Also
> set position: relative; and z-index: 2;
that the #migrain.. element is inside his parent. And
> set border-radius: 15px;
for styling. Finally
>remove the display and transition values
because they are simply not needed.
last In #migraine-de.. styles
>set width: 100%; and height: 100%;
to fit div to parent.
> remove border-radius tag
because it's set by the #container
> add transition: 0.3s ease-in-out;
to transition like you wanted.
#container {
border-radius: 15px;
width: 355px;
height: 255px;
overflow: hidden;
z-index: 2;
position: relative;
}
#container:hover #migraine-dentistry {
transform: scale(1.2);
}
#migraine-dentistry {
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
background-image: url('https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
}
<body>
<div id="shell">
<div id="container">
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
I know these long nights where you just can't get it done.
I am making a large button with a blurred background image that unblurs when you hover over it. I have used a container with overflow hidden and made the margin negative on the background image so that the edges are defined.
However, when I hover over the image and it does the transition from blurred to unblurred, or vice versa, the edges of the image are no longer defined. This creates an effect where the edges of the white container underneath it will be visible. While completely blurred or completely unblurred, these edges immediately become defined again.
How can I fix this?
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-color: white;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
I think it's a browser bug.
the container background can be seen at the borders.
It can be made less visible if the container background is the same than the image. I have used inherit in the image to avoid setting it in 2 places.
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
overflow: hidden;
}
.image {
background-image: inherit;
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
The issue appears to be caused by the negative margin and 110% width and height settings in the .image css class. I assume you're doing that to try and maintain a crisp edge when blurred. I modified those and the snippet below shows the result. Hopefully it will be useful:
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: 0;
width: 100%;
height: 100%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
So I'm trying to use a hover effect on two elements. One of the elements has a absolute position, this element needs to have the background recolored once hovered. This seems to work, however I cannot get the back image to scale accordingly. I think it has to do with the absolute positioning of the first div. But I cannot find a way to fix this. I have been trying to fix it using pointer-event but I cannot get that to do the trick.
<style>
.master {
width: 1200px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
}
img:hover {
transform: scale(1.2)
}
.hover {
position: absolute;
height: 100%;
width: 100%;
}
.hover:hover {
background: rgba(255, 0, 0, 0.5);
}
</style>
<div class="master">
<div class="hover">
</div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>
This is the code I have got right now
You can't get hover effects on two stacked elements at once. However, if you want to be able to hover the element which is behind another element, you can use pointer-events: none; on the element in the foreground, allowing mouse actions to "go through it" and therefore affect the element in the back:
<style>
.master {
width: 1200px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
}
img:hover {
transform: scale(1.2)
}
.hover {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
}
.hover:hover {
background: rgba(255, 0, 0, 0.5);
}
</style>
<div class="master">
<div class="hover">
</div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>
You can add pointers-event: none; to img and your pointer will ignore the image but that's only in case you don't have any plan to add some mouse actions on image later
You're correct that you're not getting the hover event on the image because the absolutely positioned <div> is covering it. But since the <img> element immediately follows the <div> element in your HTML hierarchy, you can use the Adjacent Sibling Combinator to target it.
<style>
.master {
width: 1200px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
}
.hover {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
.hover:hover {
background: rgba(255, 0, 0, 0.5);
}
.hover:hover + img {
transform: scale(1.2)
}
</style>
<div class="master">
<div class="hover">
</div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>
I have found out that moving the hover effect to .master instead of the seperate elements seem to work.
<style>
.master {
width: 1200px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
z-index: 50;
}
.master:hover img{
transform: scale(1.2)
}
.hover {
position: absolute;
height: 100%;
width: 100%;
opacity: 0.8;
z-index: 100;
}
.master:hover .hover {
background: rgba(255,0,0, 0.5);
}
</style>
<div class="master">
<div class="hover">
test
</div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>
There is no problem between hover and absolut position.
Your problem is that img tag is place on top on .hover cause of the absolute position.
So your hover div is behind your image and the mouse over is intercepted by image tag.
Hope it's help
You need to set the :hover to an absolute element with class .hover:
.hover:hover + img {
transform: scale(1.2);
}
Also, set z-index for the same class without a :hover.
In addition, I've added transition for transform and background.
.master {
width: 1200px;
overflow: hidden;
position: relative;
display: inline-flex;
}
.hover {
position: absolute;
height: 100%;
width: 100%;
z-index: 9999;
transition: background .5s;
}
img {
width: 100%;
transition: transform .5s;
}
.hover:hover + img {
transform: scale(1.2);
}
.hover:hover {
background: rgba(255, 0, 0, 0.5);
}
<div class="master">
<div class="hover"></div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>
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)
}
I am currently trying to learn CSS3 techniques to implement on my website. I found this code online for sliding image boxes (http://www.pixelforlife.com/html-css3-sliding-image-boxes/). When you hover over the boxes, its supposed to move upwards revealing the text hidden behind it. The problem is when I run it on chrome, firefox or IE the smooth transition effect doesn't work. I tried to change the webkit values and stuff but still couldn't get it to work. Any help would be greatly appreciated.
Thanks
<!doctype html>
<html lang="en">
<head>
<title> www.PixelForLife.com - Sliding Block </title>
<style type="text/css">
body { font: 13px sans-serif; }
#montage-wrap { width: 820px; height: 200px; }
.montage-block { width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative;
margin: 0 4px 0 0; background: white; border: 1px solid #666;}
.montage-block:last-child { margin: 0; } /* removes margin on last block */
#block1 { width: 200px; height: 200px; position: absolute; display: block;
background: url("pixelforlife_thumb.png") no-repeat;
-webkit-transition: top .3s ease-in-out; }
.montage-block:hover #block1 { top: -150px; }
.thumb_content { padding: 70px 15px 0 15px; color: #777; }
.thumb_content h1 { margin: 0 0 5px 0; color: #666; font-size: 14px; }
</style>
</head>
<body>
<div id="montage-wrap">
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
<!-- A sample Block -->
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
</div> <!-- montage wrap -->
</body>
</html>
i changed the css position: top to margin:top
Its worked for me
#block1 {
width: 200px;
height: 200px;
position: absolute;
transition: all 0.5s ease-in-out;
}
.montage-block:hover #block1 {
margin-top: -100px;
}
Demo
probably this is the one you wanted
DEMO HERE
#block1 {
background: url("pixelforlife_thumb.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 200px;
position: absolute;
top: 0;
transition-delay: 0.5s;
transition-duration: 1.5s;
transition-property: top;
width: 200px;
}
and on hover
#block1:hover {
top: -150px ;
}
don't use same id on same page. an ID is unique per page.
You have 2 span with the same id :
<span id="block1"></span>
Change id="block1" to class="block1" and don't forget to change it in your css too.