CODEWITHSUNDEEP
htmlcss
RaymondNelson
RaymondNelson

Reputation: 121

How can I create a fade in hover effect for my slideshow?

Basically, I am trying to create a slideshow that has a hover effect that displays a caption on the image. I have already made the slideshow, but I am having trouble making the hover effect. I would like the hover effect to be placed when the user hovers on the image in the slideshow, and would like it to fade in if possible. Once the user hovers the image, I would also like a small text caption in the middle of the image. How can I do this? Any help would be appreciated. Thanks. Here is my code.

body{
    margin: 0;
    padding: 0;
    background: #34495e;
}

.slidershow{
    width: 700px;
    height: 400px;
    overflow: hidden;
}

.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navigation{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.bar{
    width: 50px;
    height: 10px;
    border: 2px solid #fff;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}

.bar:hover{
    background: #fff;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
    width: 500%;
    height: 100%;
    display: flex;
}

.slide{
    width: 20%;
    transition: 0.6s;
}

.slide img{
    width: 100%;
    height: 100%;
}

#r1:checked ~ .s1{
    margin-left: 0;

}

#r2:checked ~ .s1{
    margin-left: -20%;
    
}

#r3:checked ~ .s1{
    margin-left: -40%;
    
}

#r4:checked ~ .s1{
    margin-left: -60%;
    
}

#r5:checked ~ .s1{
    margin-left: -80%;
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="slidershow middle">
        <div class="slides">
            <input type="radio" name="r" id="r1" checked>
            <input type="radio" name="r" id="r2">
            <input type="radio" name="r" id="r3">
            <input type="radio" name="r" id="r4">
            <input type="radio" name="r" id="r5">
            <div class="slide s1">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
            <div class="slide">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
            <div class="slide">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
            <div class="slide">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
            <div class="slide">
                <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
            </div>
        </div>
        <div class="navigation">
            <label for="r1" class="bar"></label>
            <label for="r2" class="bar"></label>
            <label for="r3" class="bar"></label>
            <label for="r4" class="bar"></label>
            <label for="r5" class="bar"></label>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Views: 260

Answers (2)

Tanim
Tanim

Reputation: 1249

Please check the snippet & lemme know if this is what you wanted or else.

* {
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    background: #34495e;
}

.slidershow{
    width: 700px;
    height: 400px;
    overflow: hidden;
}

.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navigation{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.bar{
    width: 50px;
    height: 10px;
    border: 2px solid #fff;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}

.bar:hover{
    background: #fff;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
    width: 500%;
    height: 100%;
    display: flex;
}

.slide{
    width: 20%;
    transition: 0.6s;
}

.slide > h2 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 30px);
    text-align: center;
    /*  text-shadow: 0 2px 0 #000; */
    padding: 15px;
    background: rgba(255,255,255,.6);
    color: #333;
    font-size: 18px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease;
    z-index: 2;
}

.slides .slide:hover > h2 {
    visibility: visible;
    opacity: 1;
}

.slide img{
    width: 100%;
    height: 100%;
}

#r1:checked ~ .s1{
    margin-left: 0;

}

#r2:checked ~ .s1{
    margin-left: -20%;

}

#r3:checked ~ .s1{
    margin-left: -40%;

}

#r4:checked ~ .s1{
    margin-left: -60%;

}

#r5:checked ~ .s1{
    margin-left: -80%;
}

#r1:checked ~ .navigation [for="r1"] {background: #fff}
#r2:checked ~ .navigation [for="r2"] {background: #fff}
#r3:checked ~ .navigation [for="r3"] {background: #fff}
#r4:checked ~ .navigation [for="r4"] {background: #fff}
#r5:checked ~ .navigation [for="r5"] {background: #fff}
<div class="slidershow middle">
    <div class="slides">
        <input type="radio" name="r" id="r1" checked>
        <input type="radio" name="r" id="r2">
        <input type="radio" name="r" id="r3">
        <input type="radio" name="r" id="r4">
        <input type="radio" name="r" id="r5">
        <div class="navigation">
            <label for="r1" class="bar"></label>
            <label for="r2" class="bar"></label>
            <label for="r3" class="bar"></label>
            <label for="r4" class="bar"></label>
            <label for="r5" class="bar"></label>
        </div>
        <div class="slide s1">
            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate, deleniti!</h2>
            <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
        </div>
        <div class="slide">
            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate, deleniti!</h2>
            <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
        </div>
        <div class="slide">
            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate, deleniti!</h2>
            <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
        </div>
        <div class="slide">
            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate, deleniti!</h2>
            <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
        </div>
        <div class="slide">
            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate, deleniti!</h2>
            <img src = "https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
        </div>
    </div>
</div>

Upvotes: 1

FluffyKitten
FluffyKitten

Reputation: 14312

Ok, lets look at the fade-in on hover first, then adding the text overlay.

Fade-in image on hover

This means to start with the image with a semi-opaque setting, e.g. opacity:0.5, and then on hover change it to opacity:1. We also want this to fade is so we set the transition property. So the changes we need to make to your snippet are:

.slide img {
    opacity: 0.5;             /* Image has 50% opacity when it is loaded */
    transition: opacity 1s;   /* Set a 1 second transition effect of the opacity */
    /* Rest of CSS...*/
}
.slide:hover img {
    opacity: 1;               /* Make the image 100% opacity when the slide is hovered */
}

Fade-in text overlay

The first thing we need to do is add the text to be displayed. We can add that as a new div in the slide class, and give it a new class (e.g. imagecaption) so we can target it in the CSS.
You already have a class that will place the text on the middle of an absolute-positioned element, so we can use that to handle the placement:

<div class="slide">
  <img src="https://example.com/myimage.jpg">
  <div class="imagecaption middle">This is some text</div>
</div>

For the text, we want it hidden at the start and to fade in on hover so we set opacity to 0, and chnge it to 1 on hover, and we use the transition property for the fade effect

.imagecaption {
    opacity: 0;               /* Text is not visible when it is loaded */
    transition: opacity 1s;   /* Set a 1 second transition effect of the opacity */
}

.slide:hover .imagecaption {
    opacity: 1;               /* Text is made 100% visible when the slide is hovered */
}

Working Example putting all this together:

body {
  margin: 0;
  padding: 0;
  background: #34495e;
}

.slidershow {
  width: 700px;
  height: 400px;
  overflow: hidden;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.bar {
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}

.bar:hover {
  background: #fff;
}

input[name="r"] {
  position: absolute;
  visibility: hidden;
}

.slides {
  width: 500%;
  height: 100%;
  display: flex;
}

.slide {
  width: 20%;
  transition: 0.6s;
}

.slide img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  transition: opacity 1s;
}

.imagecaption {
  font-size: 2em;
  opacity: 0;
  transition: opacity 1s;
}

.slide:hover img {
  opacity: 1;
}

.slide:hover .imagecaption {
  opacity: 1;
}

#r1:checked~.s1 {
  margin-left: 0;
}

#r2:checked~.s1 {
  margin-left: -20%;
}

#r3:checked~.s1 {
  margin-left: -40%;
}

#r4:checked~.s1 {
  margin-left: -60%;
}

#r5:checked~.s1 {
  margin-left: -80%;
}
<div class="slidershow middle">
  <div class="slides">
    <input type="radio" name="r" id="r1" checked>
    <input type="radio" name="r" id="r2">
    <input type="radio" name="r" id="r3">
    <input type="radio" name="r" id="r4">
    <input type="radio" name="r" id="r5">
    <div class="slide s1">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
      <div class="imagecaption middle">This is some text</div>
    </div>
    <div class="slide">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
      <div class="imagecaption middle">This is some more text</div>
    </div>
    <div class="slide">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
    </div>
    <div class="slide">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
    </div>
    <div class="slide">
      <img src="https://e2k9ube.cloudimg.io/s/cdn/x/https://edienet.s3.amazonaws.com/news/images/full_40419.jpg?v=15/06/2020%2016:52:00">
    </div>
  </div>
  <div class="navigation">
    <label for="r1" class="bar"></label>
    <label for="r2" class="bar"></label>
    <label for="r3" class="bar"></label>
    <label for="r4" class="bar"></label>
    <label for="r5" class="bar"></label>
  </div>
</div>

Note, without using javascript, you will run into some issues like changing the CSS of non-children on hover e.g. when you hover the slide it will appear 100% opacity, but when you hover the navigation that is an unrelated element so the hover effect will no longer happen for the image.

Upvotes: 1

Related Questions