How to make text appear on hover

New Page

Hacer que el texto aparezca al pasar el mouse

Pregunta

Preguntó hace 7 years, 4 months

Modified 7 years, 4 months ago

Visto 15k times

Denunciar este anuncio

This question shows research effort; it is useful and clear

0

This question shows no research effort; it’s not clear or not helpful

Bookmark this question.

View activity on this post.

Entonces necesito que el texto aparezca al pasar el mouse sobre la imagen (no tiene que ser un enlace si eso est demasiado difícil)

html

<div id=”con”> <div id=”box1″> <p id=”text1″> <a href=”url”>DESTINATION</a>SS </p> </div>

CSS

#con { width:1024px; height: 670px; background color: #161717; } #box1 { float: left; font size: 25px; width: 388px; height: 477px; background image: url(media/trying1.png); left margin: 120px; top margin: 90px; }

  • html
  • CSS
  • text
  • float

To share

Share a link to this question

Copy link CC BY-SA 3.0

Mejora esta pregunta

Seguir

Sigue esta pregunta para recibir notifications

modified May 29, 2015 at 7:58 AM

Captainsac Avatar

captainsack

2 454 3 3 gold badges 24 24 silver badges 48 48 bronze badges

requested on May 29, 2015 at 7:41 am

lisap user avatar

Lisap Lisap

13 1 1 gold badge 1 1 silver badge 3 3 bronze badges

2

  • opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/…

    –lisa

    May 29, 2015 at 7:42 am

  • Comment voulez-vous que le texte apparaisse ? Un pop-up ? Texte cliquable ? Quel texte doit apparaître ? De quelle image parles-tu ? Utilisez des termes tels que “lorsque vous survolez la div #box1…”. Mais avant tout, créez un jsFiddle pour nous.

    – MortenMoulder

    29 mai 2015 à 7:45

Ajouter un commentaire | 

5 réponses5

Ordenado por: Restablecer a predeterminado

Puntaje más alto (predeterminado) Tendencia (los votos recientes cuentan más) Fecha de modificación (más reciente primero) Fecha de creación (el más antiguo primero)

This answer is useful

2

This answer is not useful

Show activity on this post.

#con { width:1024px; height:670px; background-color: #161717; } #box1 { float:left; font-size:25px; width:388px; height:477px; background-image: url(media/trying1.png); background: #ccc; /*for example*/ margin-left: 120px; margin-top: 90px; } #text1{ opacity: 0; transition: all 0.5s; } #box1:hover #text1{ opacity: 1; } <div id=”con”> <div id=”box1″> <p id=”text1″> <a href=”url”>DESTINATION</a>SS </p> </div>

Ejecutar fragmento de código Hide results

Expand fragmento

Share

Share a link to this answer

Copy link CC BY-SA 3.0

improve this respuesta

Seguir

Sigue esta respuesta para recibir notifications

modified on May 29, 2015 at 7:54 am

answered May 29, 2015 at 7:48 am

Dmitry user avatar

Dimitri Dimitri

4,385 3 3 gold badges 27 27 silver badges 36 36 bronze badges

0

Ajouter un commentaire | 

Signaler cette annonce

Cette réponse est utile

0

Cette réponse n’est pas utile

Afficher l’activité sur ce post.

¿Es esto lo que estás tratando de lograr ?

#con { width: 1024px; height: 670px; background-color: #161717; } #box1 { float: left; font-size: 25px; width: 388px; height: 477px; /* Changed the background url so that it works */ background: url(https://placehold.it/200×200) no-repeat center center; background-size: cover; margin-left: 120px; margin-top: 90px; } /* The CSS below is added to hopefully achieve the effect you’re looking for. */ #text1 { display: none; } #box1:hover #text1 { display: block; } <div id=”con”> <div id=”box1″> <p id=”text1″> <a href=”url”>DESTINATION</a>SS </p> </div>

Ejecutar fragmento de código Hide results

Expand fragmento

Share

Share a link to this answer

Copy link CC BY-SA 3.0

improve this respuesta

Seguir

Sigue esta respuesta para recibir notifications

answered May 29, 2015 at 7:46 am

jollelj user avatar

jollelj jollelj

990 1 1 gold badge 9 9 silver badges 18 18 bronze badges

0

Add a comment | 

This answer is helpful

0

This answer is not helpful

View activity on this post.

Agrega esto

#box1 a{display:none;} #box1:hover a{display:inline;}

embrace here

o si queeres esto para<p>

#box1 #text1{display:none;} #box1:hover #text1{display:block;}

To share

Share a link to this answer

Copy link CC BY-SA 3.0

improve this respuesta

Seguir

Sigue esta respuesta para recibir notifications

answered on May 29, 2015 at 7:51 am

Rasel user avatar

Rasel Rasel

5 250 3 3 gold badges 32 32 silver badges 39 39 bronze badges

Add a comment | 

Report this ad

This answer is helpful

0

This answer is not helpful

View activity on this post.

puedes probar esto..

<style> #con { width:1024px; height: 670px; background color: #161717; } #box1 { float: left; font size: 25px; width: 388px; height: 477px; background image: url(media/trying1.png); left margin: 120px; top margin: 90px; color:#161717; } #con:hover #box1 { color:white; } </style>

what you can do is detect when the parent is on hover but the css effect is for the child

i hope this can help

To share

Share a link to this answer

Copy link CC BY-SA 3.0

Improve this answer

Follow

Follow this answer to receive notifications

answered on May 29, 2015 at 7:57 am

Brandon Jake Sullano user avatar

Brandon Jake Sullano Brandon Jake Sullano

335 2 2 gold badges 7 7 silver badges 23 23 bronze badges

Add a comment | 

This answer is helpful

0

This answer is not helpful

View activity on this post.

very simple css

#box1 > #text1 { display: none; } #box1:hover > #text1 { display: block; }

To share

Share a link to this answer

Copy link CC BY-SA 3.0

Improve this answer

Follow

Follow this answer to receive notifications

modified on May 29, 2015 at 8:50 am

Avatar of Mohamad Shiralizadeh

Mohamed Shiralizadeh

7,993 6 6 gold badges 60 60 silver badges 86 86 bronze badges

answered May 29, 2015 at 7:53 am

ZI TEG user avatar

ZI-TEG ZI-TEG

53 3 3 bronze badges

Add a comment | 

Your answer

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid…

  • Ask for help, clarification, or respond to other responses.
  • Make statements based on opinion; back them up with references or personal experience.

To learn more, check out our tips for writing great responses.

Saved Draft

Draft rejected

Sign up or log in

Sign up with Google

Sign up using Facebook

Sign up using your email and password

Submit

Post as guest

Last name

E-mail

Required, but never displayed

Post as guest

Last name

E-mail

Required, but never displayed

Post your answer Ignore

By clicking “Post your answer” you agree to our Terms of Service, Privacy Policy and Cookies Policy

Not the answer you are looking for? Browse other tagged questions

  • html
  • CSS
  • text
  • float

or ask your own question.

  • The overflow blog
  • Five Nine Uptime Without Developer Burnout (Ep. 488)

  • We Hate Scrum and Agile… When Done Badly (Ep. 489)

  • Featured on Meta
  • Recent color contrast changes and accessibility updates

  • Reviewer overboard! Or a request for improved onboarding guidance for new…

  • Do I need to explain other people’s answers in code?

Report this ad

Report this ad

Related

2541

Make a div fill the height of the remaining screen space

2428

How can I make a div no bigger than its contents?

2190

Vertically align text next to an image?

2475

How do I give text or an image a transparent background using CSS?

5916

How to disable highlighted text selection

2561

How to make 100% height div of browser window

1492

How to vertically align text in a div?

1887

How do I create a placeholder for a “select” box?

1242

How to Create a Twitter Bootstrap Menu Dropdown on Hover Instead of Click

6895

How to find all files containing specific text (string) in Linux

Network burning questions

  • What is the “correct” slope formula for a regression? Deltas or Pearson?
  • Do lipids have a monomer or not?
  • Can Arcane Armor replace a missing eye?
  • How to get rid of a large amount of wet sugar?
  • Hide a continent
  • Can I bring my dog ​​to campus?
  • How important is networking at conferences?
  • Quel est le cas d’utilisation de la désactivation d’un index ?
  • Le radical + そ う peut-il signifier ouï-dire ?
  • “Todes les sábades y dominges” ? Ca parle de quoi?
  • Question sur la définition d’un homomorphisme
  • Python au décibel précis ?
  • Comment taper le symbole schwa ə si Alt + 0259 ne fonctionne pas ?
  • Is the fake ice cream on top of an ice cream truck called an “ice cream figure”?
  • Issues with FindRoot. Getting error: FindRoot::eqlist: In the first argument {True,z1==0} only some of the components are equations
  • Finding flights that do NOT stop in the USA
  • Is there anything illegal about working for another party while on paid leave from one’s job?
  • Do stocks made with less water lack the same flavor as a stock made with lots of water?
  • For smash burger patties, are you supposed to wait until the meat releases from the pan before you flip it?
  • Which academic writing style allows extensive explanatory footnotes
  • How many syllables do these rules say that ‘every’ has?
  • Homotopy type of Diff(ℝP³)
  • Why does space warfare not lead to total anhiliation of both sides?
  • Is this a breathable atmosphere for human-like aliens that have more efficient oxygen-carrying blood? Normal humans would require a gas mask (oxygen)

Question feed

Subscribe to RSS

Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

How to Add an Animated Text Over an Image on Hover With CSS3

It is possible to display an animated text over a faded image on hover using pure CSS.

If you want to mouse over the image and see a text appearing animatedly, then you are in the right place! Let’s see how we can do it step by step.

Watch a lesson Watch a video course   CSS – The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Add your image using the <img> tag.
  • In a <div> element, put the text you want to appear on hovering.

<h2>Texte animé sur une image estompée au survol</h2> <div class=”example”> <img src=”https://www.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951. jpeg” width=”300″ height=”300″ alt=”tree” /> <div class=”content”> <div class=”text”>Arbre</div> </div> </div> Ajouter CSS

  • Set the :hover switch. The hover effect is defined using the :hover pseudo-class which selects and styles the element.
  • Set the opacity property. This is the first property you should set, as it specifies the level of transparency for an element. This would hide every element inside the class at first.
  • Set the transition property. In the given example, the transition erases the image slowly, in 400 milliseconds. If you don’t specify the transition property, there will be no effect and the image will quickly fade.
  • Add transition-delay and transition-duration properties. The first specifies the startup process and the second specifies the time taken for the text to move up and down.

.example { position: relative; padding: 0; width: 300 pixels; viewing block; cursor: pointer; hidden overflow; } .content { opacity: 0; font size: 40px; position: absolute; high: 0; left: 0; color: #1c87c9; background color: rgba (200, 200, 200, 0.5); width: 300 pixels; height: 300px; -webkit-transition: every 400 ms of transition; -moz-transition: every 400 ms of transition; -o-transition: every 400 ms of relaxation; -ms-transition: every 400 ms of release; transition: every 400 ms of release; align text: center; } .example .content:hover { opacity: 1; } .example .content .text { height: 0; opacity: 1; transition delay: 0s; transition time: 0.4s; } .example .content:hover .text { opacity: 1; transform : translateY(250px); -webkit-transform: translateY(250px); }

Let’s take the steps with the following example.

Example of creating an animated text going from top to bottom on an image on hover:

<!DOCTYPE html> <html> <head> <title>Document title</title> <style> .example { position: relative; padding: 0; width: 300 pixels; viewing block; cursor: pointer; hidden overflow; } .content { opacity: 0; font size: 40px; position: absolute; high: 0; left: 0; color: #1c87c9; background color: rgba (200, 200, 200, 0.5); width: 300 pixels; height: 300px; -webkit-transition: every 400 ms of transition; -moz-transition: every 400 ms of transition; -o-transition: every 400 ms of relaxation; -ms-transition: every 400 ms of release; transition: every 400 ms of release; align text: center; } .example .content:hover { opacity: 1; } .example .content .text { height: 0; opacity: 1; transition delay: 0s; transition time: 0.4s; } .example .content:hover .text { opacity: 1; transform: translateY(250px); -webkit-transform: translateY(250px); } </style>

Try it yourself »

Results

Animated text on faded image on hover

Arbol

Tree

If it establishes the property of the alineation of texto in “izquierda” or “derecha”, el texto will mostrará de arriba hacia abajo en los lados izquierdo y derecho, respectively.

Example of creating an animated text that goes from abajo hacia el centro sobre una imagen al pasar el mouse:

<!DOCTYPE html> <html> <head> <title>Document title</title> <style> .example { cursor: pointer; height: 300px; position: relative; hidden overflow; width: 400 pixels; align text: center; } .example .fadedbox { background-color: #666666; position: absolute; high: 0; left: 0; color: #fff; -webkit-transition: every 300 ms of transition; -moz-transition: every 300 ms of transition; -o-transition: every 300 ms of relaxation; -ms-transition: every 300 ms of release; transition: every 300 ms of release; opacity: 0; width: 360 pixels; height: 100px; padding: 130px 20px; } .example:hover .fadedbox { opacity: 0.8; } .example .text { -webkit-transition: every 300ms of transition; -moz-transition: every 300 ms of transition; -o-transition: every 300 ms of relaxation; -ms-transition: every 300 ms of release; transition: every 300 ms of release; transform: translateY(30px); -webkit-transform: translateY(30px); } .example .title { font-size: 2.5em; text transformation: uppercase; opacity: 0; Transition Delay: 0.2s; transition time: 0.3s; } .example:hover .title, .example:focus .title { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } </style> </head> <body> <h2>Animated text on image faded on hover</h2> <div class=”example”> <img src=”/uploads/media/default/0001/01 /4982c4f43023330a662b9baed5a407e391ae6161.jpeg” width=”400″ height=”300″ alt=”house” /> < div class=”fadedbox”> <div class=”title text”>House </div> </div> </div> </body> </html> transition time: 0.3s; } .example:hover .title, .example:focus .title { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } </style> </head> <body> <h2>Animated text on image faded on hover</h2> <div class=”example”> <img src=”/uploads/media/default/0001/01 /4982c4f43023330a662b9baed5a407e391ae6161.jpeg” width=”400″ height=”300″ alt=”house” /> <div class=”fadedbox”> <div class=”title text”>House </div> </div> </ div> </body> </html> transition time: 0.3s; } .example:hover .title, .example: focus.title { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } </style> </head> <body> <h2>Animated text on image faded on hover</h2> <div class=”example”> <img src=”/uploads/media/default/0001/01 /4982c4f43023330a662b9baed5a407e391ae6161.jpeg” width=”400″ height=”300″ alt=”house” /> <div class=”fadedbox”> <div class=”title text”>House </div> </div> </ div> </body> </html>

Inténtalo tú mismo”

To save maximum browser compatibility, use extensions like -webkit- for Safari, Google Chrome and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera with transition properties and transformation.


Video How to make text appear on hover

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…