Breaking News: Grepper is joining You.com. Read the official announcement!

text hover css

Add Answer

Shankar Anand answered on December 21, 2022 Popularity 10/10 Helpfulness 1/10

answer text hover css

related div hover text

text hover css

Comment

-1

/* (A) WRAPPER */
.fullwrap {
  position: relative; /* required for (c2) */
  max-width: 500px; /* optional */
}
 
/* (B) RESPONSIVE IMAGE */
.fullwrap img { width: 100%; }
 
/* (C) CAPTION */
.fullcap {
  /* (C1) DIMENSIONS */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
 
  /* (C2) POSITION */
  position: absolute;
  top: 0; left: 0;
  text-align: center;
  padding-top: 30%;
 
   /* (C3) COLORS */
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}
 
/* (D) SHOW/HIDE */
.fullcap {
  visibility: none; opacity: 0;
  transition: opacity 0.3s;
}
.fullwrap:hover .fullcap {
  visibility: visible; opacity: 1;
}

Popularity 10/10 Helpfulness 1/10 Language css

Source: code-boxx.com

Tags: css hover text

Link to this answer
Share Copy Link

Contributed on Dec 21 2022

Shankar Anand

0 Answers Avg Quality 2/10

Closely Related Answers

div hover text

Comment

<div title="This is my tooltip">

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: hover hove

Link to this answer
Share Copy Link

Contributed on Mar 01 2023

FishBrawler

0 Answers Avg Quality 2/10

text hover css

Contents

More Related Answers

text hover css

Closely Related Answers

div hover text

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.