CODEWITHSUNDEEP
htmlcss
Joan Contemprate
Joan Contemprate

Reputation: 33

How to show description on top of an image by hover

I have 8 images and it has description each, I want that when I hover each button inside the image the description will display on top of it. Honestly I spend days already with these problem, trying to solve it by my own but still couldn't figure it out. Any help would be appreciated.

PS: I have only 2 button here because I am not finish in designing them. And please don't be confused of the repeating description of the image.

.section-feature {

    padding-top: 0;
}
.feature-showcase {
    list-style: none;
    width: 100%;
}
.feature-showcase li {
    display: block;
    float: left;
    width: 25%;
}
.features-photo {
    width: 100%;
    margin:0;
    overflow: hidden;
    background-color: #000;

}
.features-photo img {
	position: relative;
	opacity:0.7;
    width: 100%;
    height: auto;
    transform: scale(1.15);
    transition: transform 0.5s,  opacity 0.5s;
    
}
.features-photo img:hover {
    opacity: 1;
    transform: scale(1.04)
}
.btn,
.btn1{
    position: absolute;
    top: 40%;
    left: 8%;
    transform: translate(200%,3200%);
    background-color: rgba(0, 0, 0, 0.33);
    color: #ffffff;
    z-index: 1;
    font-size: 16px;
    padding: 12px 24px ;
	outline: none;
    border: none;
    cursor: pointer;
    border-radius: 15px;
    text-align: center;
}
.btn1 {
    position: absolute;
    top: 27%;
    left: 16.5%;
	transform: translate(500%, 3400%);

}


 .btn:hover {
    background-color: black;
	opacity: 1;
}
 .btn1:hover {
    background-color: black;
	
}


 .long-copy {
	 z-index: 1;
	 display: none;
	background-color: rgba(186, 168, 172, 0.21); 
	color: #fcf5f5;
	 letter-spacing: 1px;
	line-height: 145%;
	 float: left;

}
  .btn:hover ~ figcaption{
		display: block;  

            
}
    <section class="section-feature">
	
		<button class="btn">Info</button>
		
    <ul class="feature-showcase">
        <li>
        <figure class="features-photo">
            <img src="resources/images/Real%20Time%2001.jpg" alt="real-time">
					<figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>  
            </figure>
        </li>

				
 <li>
		
<figure class="features-photo">
			
<button class="btn1">Info</button>
				
<img src="resources/images/Overspeeding.jpg" alt="Overspeeding">
			     <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>      
        </li>
        
        
 <li>
 <figure class="features-photo">
 <img src="resources/images/Driver%20Identification%2001.jpg" alt="Driver Identification">
			   <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
       </figure>         
        </li>
        
        
 <li>
<figure class="features-photo">
 <img src="resources/images/Fuel%20Management.jpg" alt="Fuel Management">
			          <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>
        </li>
  
  <li>
 <figure class="features-photo">
   <img src="resources/images/Maintenance.jpg" alt="Maintenance">
			      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>        
        </li>
        
  <li>
  <figure class="features-photo">
  <img src="resources/images/Accident%20Data.jpg" alt="Accident">
			                  <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>  
        </li>
                 
<li>
<figure class="features-photo">
<img src="resources/images/Geofencing%20.jpg" alt="Geofencing">
			 <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>
        </li>
                 
                 
  <li>
  <figure class="features-photo">
 <img src="resources/images/Journey%20Management.jpg" alt="Journey Management">
			      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>           
        </li>
        </ul>
    
    </section>

Upvotes: 3

Views: 396

Answers (2)

joshmoto
joshmoto

Reputation: 5088

Here is another css solution using your code.

See working demo here. https://jsfiddle.net/joshmoto/d7yev0xt/

I've also used your classes to the absolute element and class selector for demo purposes; so you can see whats going on. You do not have to write the css selectors as long as mine.

Your HTML

<ul class="feature-showcase">
  <li>
    <figure class="features-photo">
      <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" alt="real-time">
      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous
        vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but
        also to other road users.</figcaption>
    </figure>
  </li>
</ul>

CSS

FIGURE.features-photo {
  position: relative;
}

FIGURE.features-photo IMG {
  display: block;
  width: 100%;
}

FIGURE.features-photo:before {
  content: "";
  display: block;
  background: black;
  opacity: 0;
  transition: opacity .50s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

FIGURE.features-photo:hover:before {
  opacity: .75;
}

FIGURE.features-photo FIGCAPTION.long-copy {
  text-align: center;
  display: block;
  color: #ffffff;
  position: absolute;
  width: 90%;
  max-height: 90%;
  transition: opacity .50s ease-in-out;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

FIGURE.features-photo:hover FIGCAPTION.long-copy {
  opacity: 1
}

I am using opacity: and the transition: css properties to reveal the description on mouse hover.

I am also using the :before pseudo-class to create the black background overlay so we don't have to rely on your figcaption being 100% height and width.

This code will need some work still, with text-overflows, ellipses and device compatibly, but its a start.

Upvotes: 1

Kas Elvirov
Kas Elvirov

Reputation: 7980

I've tried to do something with your code but I decided to make it from scratch.

Here is a two examples:

  • pure CSS and HTML (but it looks not good for big descriptions)
  • by JS (using modal popup as a solution)

CSS and HTML

* {
  font-size: 0;
}

.container {
  display: inline-block;
  position: relative;
  width: 25%;
}

.image {
  display: inline-block;
  width: 100%;
  height: auto;
}

.btn {
  position: absolute;
  bottom: 5%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  z-index: 100;
}

.btn:hover {
  background-color: #3e8e41;
  box-shadow: 1px 1px 1px #d3d3d3;
}

.btn:hover+.description {
  opacity: 1;
}

.description {
  opacity: 0;
  color: black;
  font-size: 15px;
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>

JS solution (with modal popup)

I think it's more convenient way to render as many cards as you want. You need to change code only in one place and it changes everywhere. Of course in React it will be more powerful but this method also not so bad as pure CSS and HTML solution

var data = [{
    id: "1",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "2",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "3",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "4",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "5",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "6",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "7",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "8",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  }
];

// Making image card
function createCard(src, description, id) {
  // Container
  var container = document.createElement("div");
  container.classList.add("container");
  container.setAttribute("id", id);

  // Image
  var image = document.createElement("img");
  image.classList.add("image");
  image.setAttribute("alt", "Avatar");
  image.setAttribute("src", src);

  // button
  var btn = document.createElement("div");
  btn.classList.add("btn");
  var btnText = document.createTextNode("info");
  btn.appendChild(btnText);

  // Description
  var descr = document.createElement("div");
  descr.classList.add("description");
  var descriptionText = document.createTextNode(description);
  descr.appendChild(descriptionText);

  container.appendChild(image);
  container.appendChild(btn);
  container.appendChild(descr);

  return container;
}

window.onload = function() {
  var app = document.getElementById("app");

  // Fill the app with cards based on your data
  data.map(function(item) {
    app.appendChild(createCard(item.src, item.description, item.id));
  });

  var btns = document.body.querySelectorAll(".btn");

  btns.forEach(function(btn, index) {
    btn.addEventListener("click", function(e) {
      var description = event.target.nextSibling.innerText;
      document.getElementById("description").innerText = description;

      document.getElementById("description").style.fontSize = "10px";

      // Get the modal
      var modal = document.getElementById("myModal");

      modal.style.display = "block";

      // Get the <span> element that closes the modal
      var closeModal = document.getElementsByClassName("close")[0];
      closeModal.onclick = function() {
        modal.style.display = "none";
      };

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      };
    });
  });
};
* {
  font-size: 0;
}

.container {
  display: inline-block;
  position: relative;
  width: 25%;
}

.image {
  display: inline-block;
  width: 100%;
  height: auto;
}

.btn {
  position: absolute;
  bottom: 5%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

.btn:hover+.description {
  opacity: 1;
}

.btn:hover {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
}

.description {
  text-align: center;
  height: auto;
  //opacity: 0;
  color: black;
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<div id="app"></div>

<!-- Card looks like this -->
<!--div class="container">
  <img src="#" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description"></div>
</div-->

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="description">Some text in the Modal..</p>
  </div>

</div>

Upvotes: 3

Related Questions