This is what each slide looks like:
.slideImage {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.slideOverlay {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
justify-content: center;
}
.slideImage:hover {
opacity: 0.3;
}
.slideOverlay:hover {
opacity: 1;
}
<div className="each-slide">
<div className="slideImage" style={{ 'backgroundImage': `url(${slideImages[0]})`}}>
</div>
<div className="slideOverlay">
<p>OverlayText</p>
</div>
</div>
There's three slides. The image overlay text only appears on the 2nd slide and the 2nd slide doesn't fade out. Can someone tell me why that is?
The answer is .each-slide's position needed to be relative
Related
I have a css transition so that when someone hovers over an image, the h2 will grow. It does kind of work, but the in addition to growing the h2 is also moving across the div. This has never happened to me before and I can't figure out why. You can see it's behavior here, if you scroll to the bottom of the page and hover over Our Story and Our Team: https://katherinemade.com/staging/mission-vision-values/
Here is my html:
<div class="img-relative-position">
<h2 class="over-image-text">Our Story</h2>
<img />
</div>
And my css:
.img-relative-position {
position: relative;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-relative-position h2 {
transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
transform: scale(1.5);
}
Does anyone know what could be causing my h2 to move vertically across the div, and how I can keep it center but still grow?
You can do like this
.img-relative-position {
position: relative;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-relative-position h2 {
transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
transform: scale(1.5);
}
<div class="img-relative-position">
<div class = "over-image-text"> //new div
<h2 class="over-image-text-cstm">Our Story</h2>
</div>
<img />
</div>
i think you should scale a "parent" Container so if you create something like this
<div class="img-relative-position"> // <-- the Image
<div class="scale-this-on-hover"> // <-- new container this one has to be scaled
<h2 class="over-image-text">Our Story</h2>
<img />
</div>
</div>
No need To add scale property to increase text size
.img-relative-position:hover h2 {
/* transform: scale(1.5); */ // Remove This Line
font-size: 60px; // Add font-size
}
Thanks
I think you are missing transform-origin: center on h2. I have made a snippet for you. Have a look.
Thanks me later.
* {
box-sizing: border-box;
}
.wrap {
margin: 40px;
width: 300px;
height: 200px;
line-height: 200px;
background: green;
color: #fff;
text-align: center;
}
.wrap h2 {
transition: .3s ease;
transform-origin: center center;
}
.wrap:hover h2 {
transform: scale(1.5);
}
<div class="wrap">
<h2>Hello Test</h2>
</div>
For Extra Hover Effect You Can use This Css I Hope You Like It :)
.img-relative-position {
position: relative;
overflow: hidden;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
transition: all 0.5s ease-in-out;
}
.img-relative-position:hover h2 {
font-size: 60px;
}
.img-relative-position a {
display: block;
}
.img-relative-position img {
transition: all 0.5s ease;
}
.img-relative-position:hover img {
transform: scale(1.2) rotate(-5deg);
}
Thanks
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 have the following html and CSS to have a box with an image where the title is centered. When hovering, the title is animated up and faded out while the text is faded in and animated from the bottom to the center.
This works well on PC but on touch devices, I have the problem that the user has to touch the image while scrolling to view the text. Touching the image once will immediately open the link.
Is there a way I can make it so that on mobile devices, the animation is executed when the user touches the image for the first time and the link is opened when touching for the second time? Touching outside the image should revert the animation.
I hope you can explain how I could achieve that (if it is possible). Or is there another, generally accepted way to deal with hover on mobile devices?
.content {
position: relative;
overflow: hidden;
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
.text_container {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text_container div {
top: 50%;
transform: translateY(-50%);
}
.image_container {
width: 100%;
height: 100%;
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.content:hover .image {
transform: scale(1.1);
}
.text_container {
position: absolute;
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
}
.text_container>div {
position: absolute;
text-align: center;
width: 100%;
}
.text_container .title h2 {
opacity: 1;
margin: 0px;
padding: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.content:hover .text_container .title h2 {
opacity: 0;
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}
.text_container .content div {
margin: 0px;
padding: 0px;
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
.content:hover .text_container .content div {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
<div class="content">
<a href="www.google.com">
<div class="container">
<div class="image_container">
<img src="https://www.google.com/logos/2017/fischinger/bg_cta.jpg" />
</div>
<div class="text_container">
<div class="title">
<h2>My Title</h2>
</div>
<div class="content">
<div>
Some text.
</div>
</div>
</div>
</div>
</a>
</div>
I have an image with an absolutely positioned link centered on top of it. I have transition effects when the image is hovered over, but they are lost when the link is hovered over.
HTML
<div class="imagediv">
<img src="#">
Text
</div>
CSS
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv img:hover{
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
How can I make it so my effects on image hover are retained on link hover?
Change your CSS selector to trigger when the .imagediv is hovered not the img itself.
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv:hover img {
transform: scale(1.2);
filter: grayscale(50%);
}
If you are able to switch the order of the img text elements, you could use the general sibling selector, but it only works with folowing siblings
a:hover ~ img {
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv img:hover{
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a:hover ~ img {
transform: scale(1.2);
filter: grayscale(50%);
}
<div class="imagediv">
Text
<img src="#">
</div>
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv img:hover{
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
A couple of things to fix:
You should move the :hover style to container.
The container should be set to relative position, so that the absolute link can be centered inside, otherwise the offsets will be relative to the viewport.
.imagediv {
display: inline-block;
position: relative;
}
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv:hover img {
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="imagediv">
<img src="//unsplash.it/200">
Text
</div>
If you need the entire block to be clickable, you can use flexbox.
.imagediv {
display: inline-block;
position: relative;
}
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv:hover img {
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
<div class="imagediv">
<img src="//unsplash.it/200">
Text
</div>
Use :hover on the imagediv
.imagediv {
position: relative; /* added so link position relates to imagediv */
}
.imagediv img {
transition: transform 0.2s linear;
}
.imagediv:hover img {
transform: scale(1.2);
filter: grayscale(50%);
}
.imagediv a {
position: absolute;
color: white;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="imagediv">
<img src="http://placehold.it/600x100/f00">
Text
</div>