I want text to be hidden at top of image when i hover it should be visible.
Normally image looks like this without hover with text above it.
But instead i wont text to be shown on top of image when it hover like following
So basically text shown here and div shown here in image above should be hidden initially and when hover is done show those elements.
Something similar to this
code i tried doesnt work
html:
<div class="imgcontainer">
<span class="hideme">Image text</span>
<img class="img-responsive" id="thumbnail" src="source of image">
</div>
css:
.scaleout {
transform: scale(1, 0.80);
-ms-transform: scale(1, 0.80);
-webkit-transform: scale(1, 0.80);
}
.hideme {
color: black;
top: inherit;
z-index: -1;
text-align: center;
vertical-align: middle;
position: relative;
}
please help
I hope this can help you. Jsfiddle
.hideme
{
display: block;
position: absolute;
top: 20px;
right: 0;
left: 0;
margin: 0 auto;
z-index: 10;
transition:0.3s;
}
.imgcontainer:hover .hideme
{
top:0;
}
.imgcontainer
{
width: 201px;
height: 286px;
position: relative;
}
img
{
position: absolute;
bottom: 0;
transition: 0.3s;
left: 0;
right: 0;
margin: 0 auto;
height: 286px;
z-index: 15;
}
.imgcontainer:hover img
{
height: 80%;
bottom: 10%;
}
<div class="imgcontainer">
<span class="hideme">Image text</span>
<img width="100%" class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>
Let me help you. :)
.scaleout {
transform: scale(1.25);
-ms-transform: scale(1.25);
-webkit-transform: scale(1.25);
}
.hideme {
font-size: 14px;
color: black;
top: inherit;
z-index: -1;
text-align: center;
vertical-align: middle;
position: relative;
}
#thumbnail {
width: 220px;
height: 150px;
display: block;
transform: scale(1.25);
-ms-transform: scale(1.25);
-webkit-transform: scale(1.25);
transition: all ease 500ms;
}
#thumbnail:hover {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition: all ease 500ms;
}
<div class="imgcontainer">
<span class="hideme">Image text</span>
<img class="img-responsive" id="thumbnail" src="https://www.orbitz.com/blog/wp-content/uploads/2011/09/Albuquerque_International_Balloon_Fiesta_snowpeak-e1315595588824.jpg">
<span class="hideme">Another Image text? No problem :)</span>
</div>
figure { display: flex; flex-direction: column;}
div { order: -1; visibility: hidden; }
img { align-self: flex-start; }
img:hover + div { visibility: visible; }
<figure>
<img src=https://i.stack.imgur.com/mJHKc.png?s=256&g=1>
<div>You see me only when the img is hovered :)</div>
</figure>
.hideme {
font-size: 14px;
color: black;
top: inherit;
z-index: -1;
text-align: center;
vertical-align: middle;
position: relative;
}
#thumbnail {
width: 220px;
height: 150px;
display: block;
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transition: all ease 100ms;
}
#thumbnail:hover {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transition: all ease 100ms;
}
<div class="imgcontainer">
<span class="hideme">Image text</span>
<img class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>
Try this CSS.It will help you.
For Further CSS(HOVERS & STYLES) visit the website
" http://codepen.io/ "
Regards:Sheheryar
(PAK)
figure {
width: 600px;
height: 400px;
margin:auto;
padding: 0;
background: #fff;
overflow: hidden;
}
.hover01 figure img {
-webkit-transform: scale(0.8);
transform: scale(0.9);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div class="hover01 column">
<div >
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
</div>
</body>
</html>
Related
I would like to have a hover effect on image that would display two buttons on mouse hover. I got it partially working. However currently my image has some black borders on sides, also image itself is somehow shrunk and buttons are not positioned in the centre. Does anybody have some idea how to fix these issues?
Here is how it looks like currently:
.container {
background-color: #000;
display: inline-block;
font-size: 16px;
overflow: hidden;
position: relative;
text-align: center;
width: 110px;
height: 110px;
}
.container:before,
.container:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
background-color: #000000;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
content: '';
opacity: 0.3;
z-index: 1;
}
.container:before {
-webkit-transform: skew(0deg) translateX(-155%);
transform: skew(0deg) translateX(-155%);
}
.container:after {
-webkit-transform: skew(0deg) translateX(155%);
transform: skew(0deg) translateX(155%);
}
.container img {
backface-visibility: hidden;
width: 100%;
height: 100%;
vertical-align: top;
}
.container button {
top: 50%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
.container:hover button {
opacity: 1;
}
.container:hover>img,
.container.hover>img {
opacity: 0.5;
}
.container:hover:before,
.container.hover:before {
-webkit-transform: skew(0deg) translateX(-50%);
transform: skew(0deg) translateX(-50%);
}
.container:hover:after,
.container.hover:after {
-webkit-transform: skew(0deg) translateX(50%);
transform: skew(0deg) translateX(50%);
}
.container:hover figcaption,
.container.hover figcaption {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
<div class="container">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" />
<Row>
<Col Span="12">
<Button OnClick="() => this.RemoveImage(context)" Danger>Delete</Button>
</Col>
<Col Span="12">
<Button OnClick="() => this.OpenPreviewDialog(context)">View</Button>
</Col>
</Row>
</div>
body {
height: 100vh;
display: grid;
place-items: center;
}
.content img {
width: 50vw;
}
.content {
display: grid;
place-items: center;
position: relative;
}
#button-div {
position: absolute;
display: none;
}
.content img:hover~#button-div {
display: flex;
gap: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<div id="button-div">
<button>first button</button>
<button>second button</button>
</div>
</div>
</body>
</html>
Actually, both buttons are overlapped. You need to set separate class for both button and change top positioning.
HTML:
<Button class="button1" OnClick="() => this.RemoveImage(context)" Danger tool>Delete</Button>
<Button class="button2" OnClick="() => this.OpenPreviewDialog(context)">View</Button>
CSS:
.container button1 {
top: 60%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
.container button2 {
top: 40%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
Hope it helps.
I've been trying to figure out how I can make a block of text appear to the side of an image when hovered over instead of appearing on top of it, however I can't seem to find any explanations for anything other than having the text fade in on the actual image itself. This is what I've been experimenting with(adapted from w3schools), as of right now it only has the text on the image. If anyone could edit it so that the text comes to the side that would be incredibly helpful.
.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%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
color: black;
font-size: 16px;
padding: 16px 32px;
}
<div class="container">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="placeholder" class="image" style="width:100%">
<div class="middle">
<div class="text">This should be to the side of the image</div>
</div>
</div>
If I understand correctly, you want the text to be outside of the image.
You are using position: relative on the .container, that's why the .middle will stay inside of it, removing that will solve the issue:
.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: 0;
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 {
color: black;
font-size: 16px;
padding: 16px 32px;
}
<div class="container">
<img src="https://via.placeholder.com/350x150" alt="placeholder" class="image" style="width:100%">
<div class="middle">
<div class="text">This should be to the side of the image</div>
</div>
</div>
Check if that's what you need (made myself a quick example) :
.container {
display: flex;
}
.leftBlock {
width: 50%;
height: auto;
transition: all 0.3s ease;
}
.leftBlock:hover {
opacity: 0.5;
}
.leftBlock:hover + .rightBlock {
opacity: 1;
}
.rightBlock {
right: 0;
background-color: #222;
flex-grow: 1;
text-align: center;
vertical-align: middle;
opacity: 0;
transition: all 0.4s ease;
color: #fff;
}
<div class="container">
<img src="https://images.pexels.com/photos/3683056/pexels-photo-3683056.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="leftBlock">
<div class="rightBlock">Text Goes Here</div>
</div>
I'm a blogger and I'm trying my best to learn to code certain things for everyday use. Today I'm trying to get a picture in which when you hover over it it fades in with a text over it and I want that text to have a drop down menu.
Ex: I have a picture of books. When hovered over the word Books appears in the middle of the picture and the photo has a transparent overlay. When you hover over the word Books a drop down menu says Hauls, Reviews, and Inspired By. I would also like to be able to just click the word Books and have it take me to all post labeled books.
Here is the code I have so far:
.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: #000000;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<div class="container">
<img src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">Books</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Hauls
Reviews
Inspired By
</div>
</div>
I hope this makes sense! Thanks so much for the help!
First, move the dropdown-content inside middle content, because CSS hover can't access if it's not the parent element, you can change HTML markup like this.
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
-webkit-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%);
-webkit-transform: translate(-50%, -50%);
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #000000;
display: inline-block;
color: white;
font-size: 16px;
padding: 16px 32px;
}
/* this for show dropdown */
.middle .dropdown-content {
display: none;
position: absolute;
top: 100%;
}
.middle:hover .dropdown-content {
display: block
}
<div class="container">
<img src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" class="image" alt="" />
<div class="middle">
Books
<div class="dropdown-content">
Hauls
Reviews
Inspired By
</div>
</div>
</div>
I think it works like you want.. Dropdown content always shows if middle hovered.
I want to insert a text below the single people's image.
This is my situation:
HTML:
<div class="background">
<div class="layer">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
</dvi>
</div>
CSS:
.background {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border 2.75s;
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
}
And this is what i want:
I tried to insert a div with the text after this but the over effect covers also the written like this:
Try to add text block after overlay
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
<div class="text-block">
/*here you text*/
</div>
Just add a div under each div-diviso and wrap in another div :)
.background {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border 2.75s;
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
.image-description {
width: 100%;
color: white;
text-align:left;
}
.duties-text {
color: blue;
font-size: 16px;
}
}
<div class="background">
<div class="layer">
<div class="div-diviso-container">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg" />
<div class="overlay">
</div>
</div>
<div class="image-description">
<h2>Silvia Feit</h2>
<span class="duties-text"> Responsible for some shinanigans</span>
</div>
</div>
</div>
</div>
When I hover over the div, the .note span fades in. After it fades in, the font-weight seems to suddenly increase (it becomes bolder). I realize that in the fiddle there is no image, but it is not required to see my issue.
Html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
<title>Cool Effect</title>
</head>
<body>
<div class="imageHolder">
<img src="picture1.jpeg">
<span class="note">Hello!</span>
</div>
</body>
</html>
CSS:
.imageHolder {
position: relative;
top:300px;
left: 300px;
width: 300px;
height: 250px;
text-align: center;
overflow: hidden;
background-color: black;
}
.note {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 8px;
color: white;
font-size: 24px;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img {
width: 300;
opacity: 1;
height: 250px;
}
.imageHolder:hover .note {
opacity: 1;
}
Thanks.
Using a 3d transform (ie. using hardware acceleration) fixes lots of these rendering issues.
.note {
...
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
...
}
This is well documented
DEMO
Alternatively, this also seems to work for your example and may have better browser support...
.note {
...
-webkit-backface-visibility: hidden;
...
}
DEMO
Note these changes:
.note {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid white;
padding: 8px;
color: white;
font-size: 24px;
opacity: 0;
-webkit-transition: opacity 0.1s; <--
transition: opacity 0.1s; <--
}
Although the transition speed is slightly quicker this fixes the problem in the fiddle.