When hovering over an image, CSS text will be displayed

Creating a CSS hover effect where text appears when the user hovers over a small thumbnail and a large image is displayed upon clicking. I have set up a modal for the image, but having difficulty with positioning the text. Currently, the text is located under the image and always visible. My goal is to center the text on the image and only display it when the user hovers over the image.

CSS 

      
      <!-- filter style -->
      <link rel="stylesheet" href="css/style.css"> 
      <!-- modal style-->
      <link rel="stylesheet" href="css/w3.css">

        /* image style*/
         #wrapper{
            position:relative;
            
        } 

       /* text style*/
        #wrapper p{
            z-index:100;
            position:absolute;
            top:50%;
            left:90%;
            visibility:hidden;
            font-family:'Alegreya', serif;
            opacity: 0;
            color:white;
            }
    
        
         #wrapper:hover #wrapper p{
              visibility: visible;
              opacity: 1;
            }
        
       
HTML

        <section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3">
                   <div class="wrapper">
                    <img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" alt="Image 1" style="width:100%;cursor:zoom-in"
                         onclick="document.getElementById('modal01').style.display='block'"/>
                             <p class="text">Band<br>Portrait</p></div> 
                    
                    <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
                       <span class=" w3-padding-16 w3-display-topright">&times;</span>
                     <div class="w3-modal-content w3-animate-zoom">
                       <img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" style="width:100%">
                      </div>
                  </div>
                       
 
                  </li>
              </ul>
           </section>

jqueryhtmlcss

Answer №1

Include these guidelines in your file

.text {
  opacity: 0;
  display: inline-block;
  text-align: cen;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
}
.wrapper:hover .text {
  opacity: 1;
}

Please note that the transform property may not be supported by older browsers

View the code snippet below

<!-- filter style --> <link rel="stylesheet" href="css/style.css"> <!-- modal style--> <link rel="stylesheet" href="css/w3.css">
/* image style*/

#wrapper {
  position: relative;
}
/* text style*/

#wrapper p {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 90%;
  visibility: hidden;
  font-family: 'Alegreya', serif;
  opacity: 0;
  color: white;
}
#wrapper:hover #wrapper p {
  visibility: visible;
  opacity: 1;
}
.text {
  opacity: 0;
  display: inline-block;
  text-align: cen;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
}
.wrapper:hover .text {
  opacity: 1;
}
HTML

<section class="cd-gallery">
  <ul>
    <li class="mix color-1 check1 radio2 option3">
      <div class="wrapper">
        <img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" alt="Image 1" style="width:100%;cursor:zoom-in" onclick="document.getElementById('modal01').style.display='block'" />
        <p class="text">Band
          <br>Portrait</p>
      </div>

      <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
        <span class=" w3-padding-16 w3-display-topright">&times;</span>
        <div class="w3-modal-content w3-animate-zoom">
          <img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" style="width:100%">
        </div>
      </div>

    </li>
  </ul>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The loading speed of this page is extremely sluggish

Hello to all! I have been struggling to address this problem with no success. The index page loads quickly, but when I log in to the dashboard and try to access other pages under a PHP session, I encounter errors in my JavaScript console - not to mention ...

jqueryajax

Is the script failing to retrieve the innerHTML content?

Here is a snippet of HTML code: <div id="team_players"> <h3>Players</h3> <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button> <table> <thead> <tr> ...

javascriptjqueryhtml

Delete the "img" and "a" elements from the content within the specified node

Is it possible to only extract text from my HTML content? var sb = new StringBuilder(); doc.LoadHtml(inputHTml); foreach (var node in Doc.DocumentNode.ChildNodes) { if (node.Name == "strong" || node.Name == "#text" || node.Name == "br" || no ...

c#htmlhtml-agility-pack

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

I have been working on a script to parse an HTML page using jQuery. The script runs smoothly in Chrome, IE, and Safari, but I'm facing some unexpected behavior while testing it in Firefox (version 36.0.1). Here's the code snippet: $.ajax({ u ...

javascriptjqueryhtmlfirefox

Using the last child as a parent element in Selenium with JavaScript

I am trying to access the input element of the last child in this code snippet. Specifically, I want to retrieve the text Text Reply - Delete. <div class="priority-intent-div"> <div class="row add-priority-intent-div"> ...

javacssseleniumselenium-webdrivercss-selectors

Name of the uploaded file

I have been using the Valum file uploader library successfully. However, I am in need of including the file name along with other parameters. Currently, this is how I am approaching it: const uploader = new qq.FileUploader({ element: button, ...

jqueryfile-upload

The click function for the parent div will not be executed if I click on the child div

Hey, I encountered an issue in my code that I need help with. $(document).ready(function() { $(document).on('click', '.rohit', function() { alert('rohit'); }) $(document).on('click', '.azad', ...

javascriptjqueryangularjs

Storing Unique Characters in the Database

Currently, I am utilizing a combination of HTML and PHP for my website, but I have encountered an issue when saving content in a textarea. Whenever I incorporate a different font with special characters like ' and ", it saves as � (a black dia ...

phphtmlcharacter-encoding

The scroll bar remains hidden even though there are additional elements waiting to be displayed

I am currently utilizing asp.net along with entity framework 4 On my page, I have three tabs structured like this: The Challenge I'm Facing The issue I am encountering is that the browser fails to display a scrollbar even when there are over 150 ro ...

asp.netcss

Missing information from PHP contact form fields

I've been struggling with this issue all day and I can't seem to figure it out on my own. The solution is probably right in front of me... My contact form is mostly functional, but for some reason, I'm not receiving input for all fields. On ...

phphtmlformstwitter-bootstrapcontacts

``Is it possible to adjust the style of an HTML element based on the style of another element?

Within my web application, I am dynamically changing the style of an HTML element using JavaScript. Below is the code snippet: function layout() { if(document.getElementById('sh1').getAttribute('src') == "abc.png") { docum ...

javascripthtmlcss

A textarea with a height of zero is still visible

My goal is to create collapsible widgets within a side panel on my webpage. Overall, the functionality works smoothly. I am able to adjust the height of child divs to 0px with a transition, causing them to disappear. However, I have run into an issue wher ...

javascripthtmlcss

Partially loading CSS stylesheet

My directory structure looks like this.... iamdan > css > style.css The php file, named head.php, is located in a folder called includes within: iamdan > includes > head.php This file contains the following code: <head> <title ...

phpcssload

Switching the displayed image depending on the JSON data received

As a beginner in javascript and jQuery, I am working on displaying JSON results in the browser. My goal is to generate dynamic HTML by incorporating the JSON data. Below is an example of the JSON structure: [{"JobName":"JobDoSomething","JobStatus":2,"JobS ...

javascriptjqueryhtmljson

What could be the reason for the nav icon not displaying?

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot ...

htmlcssbootstrap-5

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

Below is the xhtml code I have created: <html> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> </h:head> <h:body> <view> <h:form> <br/> ...

htmljsfxhtml

Issues encountered when attempting to send Jquery Ajax due to UTF-8 conflicts

I created a JavaScript script to send form data to my PHP backend. However, the text field was receiving it with incorrect encoding. Here is the meta tag on my website: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Here&apo ...

javascriptphpjqueryajaxutf-8

The issue of a jQuery slider malfunctioning when using an https URL on a Wordpress website

My WowSlider is experiencing issues on the main page of my Wordpress website with https. The images in the slider are stacked statically one after another. However, when the site is accessed with http, the slider works perfectly with the expected transitio ...

javascriptjqueryajaxwordpress

In the HTML body, create some breathing room on the side

While working on a virtual restaurant menu with bootstrap, I encountered an issue where there was a persistent little space at the right side of my page that remained unfilled. Despite trying various solutions and inspecting elements, I couldn't ident ...

htmlbootstrap-5

The issue of jQuery POST methods consistently failing

I have set up a Node.js server using Express with a fairly straightforward configuration: var express = require('express'); var app = express(); app.configure(function() { app.use(express.urlencoded()); app.use(express.json()); app ...

jqueryjsonnode.jsexpresshttp-headers