Displaying text over an image while hovering

Is there a way to display text over an image when hovered, without affecting the current text box effects? I need some assistance with this. 

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #4d4d4d4d;
}

.pic {
  border: 0px solid #55009f;  
  height: 200px;
  width: 200px;
  margin: 20px;
  overflow: hidden;
}

/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.morph:hover {
-webkit-transform:translate(0px,-10px);
-webkit-filter:grayscale(100%) blur(1px);
}
<link rel="Stylesheet" href="Stylesheet.css">
<div class="morph pic">
    <img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
  </div>

htmlcsstexthover

Answer №1

Have you heard of imagetooltip before?

Check it out here:

You can find everything you need, including the demonstration, code, and files on this site.

Answer №2

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #4d4d4d4d;
}
.morph{
 height: 200px;
 width: 200px;
 text-align:center;
 margin:0
}
.pic {
  border: 0px solid #55009f;  
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
}

/*MORPH*/
.pic{
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.morph:hover > .pic{
-webkit-transform:translate(0px,-10px);
-webkit-filter:grayscale(100%) blur(1px);
}
.tooltip{
   background:rgba(80,80,80,0.5);
    color:black;
    z-index:10;
    display:none;
    position:absolute; 
    top:100px; 
    height:200px; 
    width:200px;
    margin-top:-100px;
}
.morph:hover > .tooltip{
    display:block;
}
<link rel="Stylesheet" href="Stylesheet.css">
<div class="morph">
    <div class="pic">
    <img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
    </div>
    <div class="tooltip">Lorem ipsum sit dolor am ecit, lorem ipsum sit dolor am ecit, I'm sure I got these wrong, but who cares  </div>
  </div>

You might consider utilizing this approach instead :)

Answer №3

When you hover, the text you want to display may not be visible. To achieve this effect, use the :hover selector. Here is an example:

<div class="imtex">
    <img src="some.jpg"/>
    <p>hi, my text is here.</p>
</div>

To style it accordingly:

.imtex {
    display: block; 
    position: relative; 
}

.imtex img {
    display: block; 
    position: absolute; 
    z-index: 2; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
}

.imtex p {
    display: none; 
    position: absolute; 
    z-index: 3; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
}

.imtex:hover p {
    display: block;
}

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

Can ChatGPT Service Error be resolved?

I tried using chatGPT to help me with my HTML code, but every time I opened it I received an error message saying "Failed to get service" Here is the code that I want to make work: <html> <head></head> <body> <script& ...

javascripthtml

Update the image within the svg tag

I am attempting to modify a preexisting SVG element within an HTML document. Here is the current code: <svg class="logo" viewBox="0 0 435 67"> <!-- IMAGE DIMENSIONS --> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo- ...

javascriptjqueryhtmlsvg

What is the process of integrating unique themes into a non-Wordpress website?

In the process of developing my website, I am using PHP7, HTML5, CSS3, JQuery, and JavaScript5 instead of WordPress. One feature that I want to incorporate is the ability for users to customize their theme beyond the default option. How can this be achie ...

javascriptjqueryhtmlcssphp-7

Selecting a language by clicking on it

I recently designed a bootstrap navigation bar for my website and incorporated a language selection dropdown menu into it. <li class="nav-item dropdown"> <a class="nav-link dropright" href="#" id="navbarDropdown" role="button" data-toggle="dr ...

javascripthtmljsonweb

Do plugins necessary for HTML5 Video playback?

I've done my fair share of research, but I'm still feeling a bit puzzled. When it comes to HTML5 compatible browsers (specifically Chrome 20 and Safari for Windows 5.1.7 in this case), if I include video using tags, is the expectation that it wil ...

htmlvideoplugins

The email validation function is not functioning correctly when used in conjunction with the form submission

I'm currently working on my final project for my JavaScript class. I've run into a bit of a roadblock and could use some guidance. I am trying to capture input (all code must be done in JS) for an email address and validate it. If the email is va ...

javascripthtmlformsbuttonemail-validation

Trouble with animating card components in my React app slider

In my React app, I have a slider that moves my card components when any of the icon buttons are clicked. I'm trying to implement a fade animation for each card when it is clicked, but currently, the animation only works when the page is reloaded. Here ...

javascriptcssreactjscss-animations

Is there a way to use jQuery draggable to move a zoomed image within a div clipping mask?

Looking to enhance user experience, I am developing an interface that allows users to zoom in on an image and move the zoomed version within a clipping mask div. I have created a div with dimensions of 200px by 200px and set overflow: hidden. Then, I inse ...

jqueryhtmldraggableclipping

Adding the <a> tag causes Superfish to malfunction

I've been struggling to get the latest Superfish menu code working with lists that include the <a> tag. I've double-checked everything, but it seems like I'm missing something obvious. Can anyone help me figure out what's wrong? ...

javascriptcsssuperfish

Looking to have the image float after reducing the size of the windows in html?

For my webpage, I want an image to appear on the extreme left when the browser is maximized, but then move to the extreme right when the browser is minimized. I've tried using float, but it doesn't seem to be working. Any suggestions on how to ac ...

htmlcsscss-floatminimize

The layout of webpages on Internet explorer 11 or IE 8 may appear differently than on Chrome or Mozilla

While coding a webpage using cshtml, I encountered an issue with a link pointing to a doc or pdf file in a Windows server location. In Windows Explorer, the file could be opened by clicking the link, but Chrome or Mozilla did not allow me to open the file ...

htmlcssinternet-explorergoogle-chromerazor

How to align radio_button_tag and label_tag side by side in Rails using Twitter Bootstrap 2?

Struggling to align the radio_button_tag horizontally with its label_tag. (Utilizing HAML) =radio_button_tag(:animal, "dog") =label_tag(:animal, "Dog") Which classes should I use for these form helpers to have them positioned side by side as shown below: ...

cssruby-on-railstwitter-bootstrap

Trouble with Bootstrap columns displaying on smaller devices

I designed a grid with 3 columns that exhibits issues, specifically that the columns shrink too much on smaller screens and distort the content. Is there a way to introduce a break-point at around 1000px so that all content shifts into a single column? An ...

htmlcsstwitter-bootstrapbootstrap-4

Exploring td data inside tr element using LXML

Is there a better way to parse individual statistics from the Yahoo Finance tables for formatting purposes? The current method involves repeating code to retrieve stats within each row of the table, as shown in the example below. It seems inefficient - a ...

pythonhtmlpython-3.xlxml

Ways to apply CSS to a changing div ID

I am looking to apply CSS to a dynamically generated div ID. var status = var status = item.down().next().innerHtml(); if(status == "test") { var c = 'item_'+i ; c.style.backgroundColor = 'rgb(255, 125, 115)'; //'ite ...

javascriptjqueryhtmlcss

Clear the applied style from a specific DIV element

Currently, I am working on iPhone development and have set up a webview with a DIV element. Within this DIV, I have added 'touchstart', 'touchend', and 'touchmove' events. However, I have noticed that after adding these event ...

javascriptiphonehtmlcss

How to prevent npm from being accessed through the command prompt

I recently began working on a ReactJs project. However, I am facing an issue where after starting npm in Command Prompt, I am unable to enter any text. Should I close the cmd window or is there a way to stop npm? You can now access your project at the fol ...

javascriptcssreactjsnpmcmd

What is the best way to deactivate an <a> tag in React after it has been clicked?

Is there a way to deactivate the anchor tag below in React once it has been clicked? The onClick function is not functioning on the anchor tag. <td align="left"> <input type="file" accept=".csv,.xlsx,.xls" ...

javascripthtmlreactjstypescript

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...

javascripthtmlspotify

The code is not displaying correctly in Chrome, but it works fine when viewed on a live server

While developing a webpage in Vscode, I noticed that all my CSS and Bootstrap SASS styles render correctly. However, when opening the page without using Vscode live server, some of the styles are not being applied. ...

htmlcssbootstrap-4