html - Hoe kan ik tekst op een afbeelding weergeven als de muisaanwijzer erop blijft staan?

Ik probeer een beschrijving weer te geven wanneer ik de muisaanwijzer op een afbeelding plaats. Ik heb het al op een minder dan wenselijke manier gedaan, met behulp van afbeeldingssprites en hovers hier: ik wil dat het er precies zo uitziet als hoe ik het heb, maar met echte tekst in plaats van een afbeelding.

Ik heb een paar verschillende dingen geprobeerd, maar ik weet niet hoe ik dat moet doen. Ik probeer het alleen met HTML en CSS te doen, maar ik weet niet zeker of dat mogelijk is.

Voel je vrij om in mijn code rond te neuzen, ik plak hier wat ik denk dat relevant is.

HTML

div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}
div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}
div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}
div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}
div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

<div id="projectlist">
  <div id="buzzbutton">
    <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>
  <div id="slinksterbutton">
    <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>
</div>

Antwoord 1, autoriteit 100%

Het is eenvoudig. Wikkel de afbeelding en de beschrijving “verschijnen bij zweven” in een div met dezelfde afmetingen van de afbeelding. Geef vervolgens met wat CSS de opdracht om de beschrijving te laten verschijnen terwijl u met de muis over die div zweeft.

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}
/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}
.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

<div class="img__wrap">
  <img class="img__img" src="https://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

Antwoord 2, autoriteit 86%

Probeer in je HTML de tekst die je wilt laten verschijnen in het titelgedeelte van de code te plaatsen:

<a  href="buzz.html" title="buzz hover text">

Je kunt hetzelfde doen voor de alternatieve tekst van je afbeelding.

Antwoord 3, autoriteit 14%

U kunt ook het titelkenmerk gebruiken in uw afbeeldingstag

<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />

Antwoord 4, autoriteit 5%

Dit is wat ik gebruik om de tekst bij de muisaanwijzer te laten verschijnen:

* {
  box-sizing: border-box
}
div {
  position: relative;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center
}
img {
  width: 400px;
  height: 400px;
  position: absolute;
  border-radius: 50%
}
img:hover {
  opacity: 0;
  transition:opacity 2s;
}
heading {
  line-height: 40px;
  font-weight: bold;
  font-family: "Trebuchet MS";
  text-align: center;
  position: absolute;
  display: block
}
div p {
  z-index: -1;
  width: 420px;
  line-height: 20px;
  display: inline-block;
  padding: 200px 0px;
  vertical-align: middle;
  font-family: "Trebuchet MS";
  height: 450px
}

<div>
  <img src="https://68.media.tumblr.com/20b34e8d12d4230f9b362d7feb148c57/tumblr_oiwytz4dh41tf8vylo1_1280.png">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing <br>elit. Reiciendis temporibus iure dolores aspernatur excepturi <br> corporis nihil in suscipit, repudiandae. Totam.
  </p>
</div>

Antwoord 5, autoriteit 3%

.container {
  position: relative;
  width: 50%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}
.container:hover .overlay {
  opacity: 1;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
  <img src="https://lorempixel.com/500/500/" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
</body>
</html>

Antwoord 6

HTML
<img id="close" className="fa fa-close" src="" alt="" title="Close Me" />
CSS
#close[title]:hover:after {
  color: red;
  content: attr(title);
  position: absolute;
  left: 50px;
}

Antwoord 7

<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nelsonleite/pen/RaGwba?depth=everything&order=popularity&page=4&q=product&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style class="cp-pen-styles">.product-description {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  perspective: 1000;
  backface-visibility: hidden;
}
body {
  color: #212121;
}
.container {
  padding-top: 25px;
  padding-bottom: 25px;
}
img {
  max-width: 100%;
}
hr {
  border-color: #e5e5e5;
  margin: 15px 0;
}
.secondary-text {
  color: #b6b6b6;
}
.list-inline {
  margin: 0;
}
.list-inline li {
  padding: 0;
}
.card-wrapper {
  position: relative;
  width: 100%;
  height: 390px;
  border: 1px solid #e5e5e5;
  border-bottom-width: 2px;
  overflow: hidden;
  margin-bottom: 30px;
}
.card-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card-wrapper:hover:after {
  opacity: 1;
}
.card-wrapper:hover .image-holder:before {
  opacity: .75;
}
.card-wrapper:hover .image-holder:after {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.card-wrapper:hover .image-holder--original {
  transform: translateY(-15px);
}
.card-wrapper:hover .product-description {
  height: 205px;
}
@media (min-width: 768px) {
  .card-wrapper:hover .product-description {
    height: 185px;
  }
}
.image-holder {
  display: block;
  position: relative;
  width: 100%;
  height: 310px;
  background-color: #ffffff;
  z-index: 1;
}
@media (min-width: 768px) {
  .image-holder {
    height: 325px;
  }
}
.image-holder:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4CAF50;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.6s;
}
.image-holder:after {
  content: '+';
  font-family: 'Raleway', sans-serif;
  font-size: 70px;
  color: #4CAF50;
  text-align: center;
  position: absolute;
  top: 92.5px;
  left: 50%;
  width: 75px;
  height: 75px;
  line-height: 75px;
  background-color: #ffffff;
  opacity: 0;
  border-radius: 50%;
  z-index: 10;
  transform: translate(-50%, 100%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-out;
}
@media (min-width: 768px) {
  .image-holder:after {
    top: 107.5px;
  }
}
.image-holder .image-holder__link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
}
.image-holder .image-holder--original {
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.image-liquid {
  width: 100%;
  height: 325px;
  background-size: cover;
  background-position: center center;
}
.product-description {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  padding: 10px 15px;
  overflow: hidden;
  background-color: #fafafa;
  border-top: 1px solid #e5e5e5;
  transition: height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 2;
}
@media (min-width: 768px) {
  .product-description {
    height: 65px;
  }
}
.product-description p {
  margin: 0 0 5px;
}
.product-description .product-description__title {
  font-family: 'Raleway', sans-serif;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}
.product-description .product-description__title:after {
  content: '';
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fafafa);
}
.product-description .product-description__title a {
  text-decoration: none;
  color: inherit;
}
.product-description .product-description__category {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-description .product-description__price {
  color: #4CAF50;
  text-align: left;
  font-weight: bold;
  letter-spacing: 0.06em;
}
@media (min-width: 768px) {
  .product-description .product-description__price {
    text-align: right;
  }
}
.product-description .sizes-wrapper {
  margin-bottom: 15px;
}
.product-description .color-list {
  font-size: 0;
}
.product-description .color-list__item {
  width: 25px;
  height: 10px;
  position: relative;
  z-index: 1;
  transition: all .2s;
}
.product-description .color-list__item:hover {
  width: 40px;
}
.product-description .color-list__item--red {
  background-color: #F44336;
}
.product-description .color-list__item--blue {
  background-color: #448AFF;
}
.product-description .color-list__item--green {
  background-color: #CDDC39;
}
.product-description .color-list__item--orange {
  background-color: #FF9800;
}
.product-description .color-list__item--purple {
  background-color: #673AB7;
}
</style></head><body>
<!--
Inspired in this dribbble
https://dribbble.com/shots/986548-Product-Catalog
-->
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
            <article class="card-wrapper">
                <div class="image-holder">
                    <a href="#" class="image-holder__link"></a>
                    <div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg')">
                    </div>
                </div>
                <div class="product-description">
                    <!-- title -->
                    <h1 class="product-description__title">
                        <a href="#">                        
                            Adidas Originals
                            </a>
                    </h1>
                    <!-- category and price -->
                    <div class="row">
                        <div class="col-xs-12 col-sm-8 product-description__category secondary-text">
                            Men's running shirt
                        </div>
                        <div class="col-xs-12 col-sm-4 product-description__price">
                            € 499
                        </div>
                    </div>
                    <!-- divider -->
                    <hr />
                    <!-- sizes -->
                    <div class="sizes-wrapper">
                        <b>Sizes</b>
                        <br />
                        <span class="secondary-text text-uppercase">
                            <ul class="list-inline">
                                <li>xs,</li>                                
                                <li>s,</li>                             
                                <li>sm,</li>                                
                                <li>m,</li>
                                <li>l,</li>                             
                                <li>xl,</li>                                
                                <li>xxl</li>                                
                            </ul>
                        </span>
                    </div>
                    <!-- colors -->
                    <div class="color-wrapper">
                        <b>Colors</b>
                        <br />
                        <ul class="list-inline color-list">
                            <li class="color-list__item color-list__item--red"></li>
                            <li class="color-list__item color-list__item--blue"></li>
                            <li class="color-list__item color-list__item--green"></li>
                            <li class="color-list__item color-list__item--orange"></li>
                            <li class="color-list__item color-list__item--purple"></li>
                        </ul>
                    </div>
                </div>
            </article>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <article class="card-wrapper">
                <div class="image-holder">
                    <a href="#" class="image-holder__link"></a>
                    <div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Jeans_BW_2_(3213391837).jpg/543px-Jeans_BW_2_(3213391837).jpg')">
                    </div>
                </div>
                <div class="product-description">
                    <!-- title -->
                    <h1 class="product-description__title">
                        <a href="#">                        
                            Adidas Originals
                            </a>
                    </h1>
                    <!-- category and price -->
                    <div class="row">
                        <div class="col-sm-8 product-description__category secondary-text">
                            Men's running shirt
                        </div>
                        <div class="col-sm-4 product-description__price text-right">
                            € 499
                        </div>
                    </div>
                    <!-- divider -->
                    <hr />
                    <!-- sizes -->
                    <div class="sizes-wrapper">
                        <b>Sizes</b>
                        <br />
                        <span class="secondary-text text-uppercase">
                            <ul class="list-inline">
                                <li>xs,</li>                                
                                <li>s,</li>                             
                                <li>sm,</li>                                
                                <li>m,</li>
                                <li>l,</li>                             
                                <li>xl,</li>                                
                                <li>xxl</li>                                
                            </ul>
                        </span>
                    </div>
                    <!-- colors -->
                    <div class="color-wrapper">
                        <b>Colors</b>
                        <br />
                        <ul class="list-inline color-list">
                            <li class="color-list__item color-list__item--red"></li>
                            <li class="color-list__item color-list__item--blue"></li>
                            <li class="color-list__item color-list__item--green"></li>
                            <li class="color-list__item color-list__item--orange"></li>
                            <li class="color-list__item color-list__item--purple"></li>
                        </ul>
                    </div>
                </div>
            </article>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <article class="card-wrapper">
                <div class="image-holder">
                    <a href="#" class="image-holder__link"></a>
                    <div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b8/Columbia_Sportswear_Jacket.jpg')">
                    </div>
                </div>
                <div class="product-description">
                    <!-- title -->
                    <h1 class="product-description__title">
                        <a href="#">                        
                            Adidas Originals
                            </a>
                    </h1>
                    <!-- category and price -->
                    <div class="row">
                        <div class="col-sm-8 product-description__category secondary-text">
                            Men's running shirt
                        </div>
                        <div class="col-sm-4 product-description__price text-right">
                            € 499
                        </div>
                    </div>
                    <!-- divider -->
                    <hr />
                    <!-- sizes -->
                    <div class="sizes-wrapper">
                        <b>Sizes</b>
                        <br />
                        <span class="secondary-text text-uppercase">
                            <ul class="list-inline">
                                <li>xs,</li>                                
                                <li>s,</li>                             
                                <li>sm,</li>                                
                                <li>m,</li>
                                <li>l,</li>                             
                                <li>xl,</li>                                
                                <li>xxl</li>                                
                            </ul>
                        </span>
                    </div>
                    <!-- colors -->
                    <div class="color-wrapper">
                        <b>Colors</b>
                        <br />
                        <ul class="list-inline color-list">
                            <li class="color-list__item color-list__item--red"></li>
                            <li class="color-list__item color-list__item--blue"></li>
                            <li class="color-list__item color-list__item--green"></li>
                            <li class="color-list__item color-list__item--orange"></li>
                            <li class="color-list__item color-list__item--purple"></li>
                        </ul>
                    </div>
                </div>
            </article>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <article class="card-wrapper">
                <div class="image-holder">
                    <a href="#" class="image-holder__link"></a>
                    <div class="image-liquid image-holder--original" style="background-image: url('https://www.publicdomainpictures.net/pictures/20000/nahled/red-shoes-isolated.jpg')">
                    </div>
                </div>
                <div class="product-description">
                    <!-- title -->
                    <h1 class="product-description__title">
                        <a href="#">                        
                            Adidas Originals
                            </a>
                    </h1>
                    <!-- category and price -->
                    <div class="row">
                        <div class="col-sm-8 product-description__category secondary-text">
                            Men's running shirt
                        </div>
                        <div class="col-sm-4 product-description__price text-right">
                            € 499
                        </div>
                    </div>
                    <!-- divider -->
                    <hr />
                    <!-- sizes -->
                    <div class="sizes-wrapper">
                        <b>Sizes</b>
                        <br />
                        <span class="secondary-text text-uppercase">
                            <ul class="list-inline">
                                <li>xs,</li>                                
                                <li>s,</li>                             
                                <li>sm,</li>                                
                                <li>m,</li>
                                <li>l,</li>                             
                                <li>xl,</li>                                
                                <li>xxl</li>                                
                            </ul>
                        </span>
                    </div>
                    <!-- colors -->
                    <div class="color-wrapper">
                        <b>Colors</b>
                        <br />
                        <ul class="list-inline color-list">
                            <li class="color-list__item color-list__item--red"></li>
                            <li class="color-list__item color-list__item--blue"></li>
                            <li class="color-list__item color-list__item--green"></li>
                            <li class="color-list__item color-list__item--orange"></li>
                            <li class="color-list__item color-list__item--purple"></li>
                        </ul>
                    </div>
                </div>
            </article>
        </div>
    </div>
</div>
</body></html>

Het voorbeeld is gemaakt

Antwoord 8

Ik zag dat veel mensen een afbeeldingstag gebruiken. Ik gebruik liever een achtergrondafbeelding omdat ik die kan manipuleren. Ik kan bijvoorbeeld:

Vloeiendere overgangen toevoegen
bespaar tijd door afbeeldingen niet bij te snijden door de eigenschap “background-size: cover;” te gebruiken.

De HTML/CSS:

.overlay-box {
  background-color: #f5f5f5;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.overlay-box:hover .desc,
.overlay-box:focus .desc {
  opacity: 1;
}
/* opacity 0.01 for accessibility */
/* adjust the styles like height,padding to match your design*/
.overlay-box .desc {
  opacity: 0.01;
  min-height: 355px;
  font-size: 1rem;
  height: 100%;
  padding: 30px 25px 20px;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

<div class="overlay-box" style="background-image: url('https://via.placeholder.com/768x768');">
  <div class="desc">
    <p>Place your text here</p>
    <ul>
      <li>lorem ipsum dolor</li>
      <li>lorem lipsum</li>
      <li>lorem</li>
    </ul>
  </div>
</div>

Antwoord 9

Dit is mijn oplossing, met de beforeen afterpseudo voor één element. Als iemand beperkte HTML-omstandigheden heeft en het alleen met CSS kan doen.

.base:hover::after {
    content: "text";
    color: #ffffff;
    border: 1px solid #ffffff;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    width: 50px;
    height: 30px;
    top: 0;
    position: absolute;
    margin-left: -140px;
    margin-top: 55px;
    text-align: center;
    line-height: 30px;
}
.base:hover::before{
  content: "";
      background: rgba(0, 0, 0, 0.8);
      display: inline-block;
      width: 200px;
      height: 200px;
      top: 0;
      position: absolute;
}

<a class="base"><img src='https://lorempixel.com/200/200/'></a>

Previous articleFunctie om de console in R en RStudio te wissen

Next articleHoe een numerieke kolom op te maken als telefoonnummer in SQL

Hoe kan ik tekst op een afbeelding weergeven als de muisaanwijzer erop blijft staan?

Antwoord 1, autoriteit 100%

Antwoord 2, autoriteit 86%

Antwoord 3, autoriteit 14%

Antwoord 4, autoriteit 5%

Antwoord 5, autoriteit 3%

Antwoord 6

Antwoord 7

Antwoord 8

Antwoord 9

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

VueJS/browser caching productie builds

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

Angular 4 img src is niet gevonden

HTML-tags binnen <label>

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

Angular 2 Hash (#) van de URL verwijderen