description call (HOVER)

Question

description call (HOVER)

Asked 6 years, 7 months ago

Viewed 169 times

0

How do I display the description when doing the hover in <img>?

I would like that when the user passes the mouse over an image a certain description is displayed, follows below my code:

/* corpo professores */

section#corpo {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

.professores {
  overflow: hidden;
  text-align: center;
  background: #34495e;
  padding: 60px;
}

.professores h1 {
  text-transform: uppercase;
  margin-bottom: 60px;
  color: white;
  font-size: 40px;
}

.border {
  display: block;
  margin: auto;
  width: 160px;
  height: 3px;
  background: #3498db;
  margin-bottom: 40px;
}

.ps {
  margin-bottom: 40px;
}

.ps a {
  display: inline-block;
  margin: 0 30px;
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: 50%;
}

.ps a img {
  width: 100%;
  filter: grayscale(100%);
  transition: 0.4s all;
}

.ps a:hover>img {
  filter: none;
}

.section {
  width: 600px;
  margin: auto;
  font-size: 20px;
  color: white;
  text-align: justify;
  height: 0px;
  overflow: hidden;
}

section:target {
  height: auto;
}

.name {
  display: block;
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
  font-size: 22px;
}


/* fim corpo professores */

<section id="corpo">
  <div class="professores">
    <h1>PROFESSORES</h1>
    <span class="border"></span>
    <div class="ps">
      <a href="#1"> <img src="img/1.jpg" alt=""></a>
      <a href="#2"> <img src="img/2.jpg" alt=""></a>
      <a href="#3"> <img src="img/3.jpg" alt=""></a>
    </div>

    <div class="section" id="1">
      <span class="name">JAMES ARTHUR</span>
      <span class="border"></span>
      <p>
        Existem muitas variações disponíveis de passagens de Lorem Ipsum, mas a maioria sofreu algum tipo de alteração, seja por inserção de passagens com humor, ou palavras aleatórias que não parecem nem um pouco convincentes. Se você pretende usar uma passagem
        de Lorem Ipsum
      </p>
    </div>

    <div class="section" id="2">
      <span class="name">STEVE JOBS</span>
      <span class="border"></span>
      <p>
        Existem muitas variações disponíveis de passagens de Lorem Ipsum, mas a maioria sofreu algum tipo de alteração, seja por inserção de passagens com humor, ou palavras aleatórias que não parecem nem um pouco convincentes. Se você pretende usar uma passagem
        de Lorem Ipsum
      </p>
    </div>

    <div class="section" id="3">
      <span class="name">BILL GATES</span>
      <span class="border"></span>
      <p>
        Existem muitas variações disponíveis de passagens de Lorem Ipsum, mas a maioria sofreu algum tipo de alteração, seja por inserção de passagens com humor, ou palavras aleatórias que não parecem nem um pouco convincentes. Se você pretende usar uma passagem
        de Lorem Ipsum
      </p>
    </div>

  </div>

</section>

<div class="fotos">
  <h3>fotos</h3>
  Existem muitas variações disponíveis de passagens de Lorem Ipsum, mas a maioria sofreu algum tipo de alteração, seja por inserção de passagens com humor, ou palavras aleatórias que não parecem nem um pouco convincentes. Se você pretende usar uma passagem
  de Lorem Ipsum, precisa ter certeza de que não há algo embaraçoso escrito escondido no meio do texto. Todos os geradores de Lorem Ipsum na internet tendem a repetir pedaços predefinidos conforme necessário, fazendo deste o primeiro gerador de Lorem
  Ipsum autêntico da internet. Ele usa um dicionário com mais de 200 palavras em Latim combinado com um punhado de modelos de estrutura de frases para gerar um Lorem Ipsum com aparência razoável, livre de repetições, inserções de humor, palavras não características,
  etc.
</div>

<div class="contato" a id="cont">
  <h3>contatos</h3>
  O trecho padrão original de Lorem Ipsum, usado desde o século XVI, está reproduzido abaixo para os interessados. Seções 1.10.32 e 1.10.33 de "de Finibus Bonorum et Malorum" de Cicero também foram reproduzidas abaixo em sua forma exata original, acompanhada
  das versões para o inglês da tradução feita por H. Rackham em 1914.
</div>

</div>

What do you want, buddy?

– Sam

2018/04/13 at 02:52
rrss I did not express myself right, I wanted when pass my cursor by img, open the description

– Wagner Felipe zeiyn marques

2018/04/13 at 02:56
Open as?.....

– Sam

2018/04/13 at 02:57
type in html would have the image there I have the description, of them hidden and when passing the mouse over the image, appeared the description, but by my lines just redirects, does not appear description

– Wagner Felipe zeiyn marques

2018/04/13 at 03:02
Wagner if possible, please change your question and put the question in her body, so future users who have the same question can find it more simply.

– Clayton Tosatti

2018/04/13 at 12:44
title doesn’t suit you? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title Popover

– Ricardo Pontual

2018/04/16 at 16:41

Show 1 more comment

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-04-13T12:10:51+00:00

Wagner will have to go in stages.

First if you’re using :target to call the description would not have as the :hover work... then I replace the :target for :hover in the example.

Another thing. you have a <section> and a div with the Section class <div class="section"> and I think it made you confuse a few things in CSS. But I adjusted that by putting div.section {} not to touch too much of what you’ve done.

Structurally I had to tamper with HTML to place the image descriptions inside your div.ps. This way it was possible to create a css rule .ps > .img3:hover ~ #id3 {} to show the description on :Hover without JS or jQuery.

Run "Whole Page" to see the result better since the code is not yet responsive. OBS: I touched as little as possible in the code and the result you can see below:

/* corpo professores */
section#corpo {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

.professores{
    overflow: hidden;
    text-align: center;
    background: #34495e;
    padding: 60px;
}

.professores h1{
    text-transform: uppercase;
    margin-bottom: 60px;
    color: white;
    font-size: 40px;
}

.border{
    display: block;
    margin: auto;
    width: 160px;
    height: 3px;
    background: #3498db;
    margin-bottom: 40px;
}

.ps{
    margin-bottom: 40px;
}

.ps a{
    display: inline-block;
    margin: 0 30px;
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 50%;
}

.ps a img{
    width: 100%;
    filter: grayscale(100%);
    transition: 0.4s all;
}

.ps a:hover > img{
    filter: none;
}

div.section{
    width: 600px;
    margin: auto;
    font-size: 20px;
    color: white;
    text-align: justify;
    height: 0px;
    overflow: hidden;
}

/* div.section:target{
    height: auto;
} */

.ps > .img1:hover ~ #id1 {
    height: auto;
    margin-top: 30px;
}
.ps > .img2:hover ~ #id2 {
    height: auto;
    margin-top: 30px;
}
.ps > .img3:hover ~ #id3 {
    height: auto;
    margin-top: 30px;
}


.name{
    display: block;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
}
/* fim corpo professores */

<section id="corpo">
    <div class="professores">
        <h1>PROFESSORES</h1>
        <span class="border"></span>
        <div class="ps">
            <a class="img1" href="#id1">
                <img src="http://placecage.com/200/200" alt="">
            </a>
            <a class="img2" href="#id2">
                <img src="http://placecage.com/200/200" alt="">
            </a>
            <a class="img3" href="#id3">
                <img src="http://placecage.com/200/200" alt="">
            </a>


            <div class="section" id="id1">
                <span class="name">JAMES ARTHUR</span>
                <span class="border"></span>
                <p>
                    Existem muitas variações disponíveis de passagens de Lorem Ipsum, mas a maioria sofreu algum tipo de alteração, seja por
                    inserção de passagens com humor, ou palavras aleatórias que não parecem nem um pouco convincentes. Se
                    você pretende usar uma passagem de Lorem Ipsum
                </p>
            </div>

            <div class="section" id="id2">
                <span class="name">STEVE JOBS</span>
                <span class="border"></span>
                <p>
                    Existem muitas variações disponíveis de passagens de Lorem Ipsum, mas a maioria sofreu algum tipo de alteração, seja por
                    inserção de passagens com humor, ou palavras aleatórias que não parecem nem um pouco convincentes. Se
                    você pretende usar uma passagem de Lorem Ipsum
                </p>
            </div>

            <div class="section" id="id3">
                <span class="name">BILL GATES</span>
                <span class="border"></span>
                <p>
                    Existem muitas variações disponíveis de passagens de Lorem Ipsum, mas a maioria sofreu algum tipo de alteração, seja por
                    inserção de passagens com humor, ou palavras aleatórias que não parecem nem um pouco convincentes. Se
                    você pretende usar uma passagem de Lorem Ipsum
                </p>
            </div>
        </div>
    </div>

</section>

<div class="fotos">
    <h3>fotos</h3>
    Existem muitas variações disponíveis de passagens de Lorem Ipsum, mas a maioria sofreu algum tipo de alteração, seja por
    inserção de passagens com humor, ou palavras aleatórias que não parecem nem um pouco convincentes. Se você pretende usar
    uma passagem de Lorem Ipsum, precisa ter certeza de que não há algo embaraçoso escrito escondido no meio do texto. Todos
    os geradores de Lorem Ipsum na internet tendem a repetir pedaços predefinidos conforme necessário, fazendo deste o primeiro
    gerador de Lorem Ipsum autêntico da internet. Ele usa um dicionário com mais de 200 palavras em Latim combinado com um
    punhado de modelos de estrutura de frases para gerar um Lorem Ipsum com aparência razoável, livre de repetições, inserções
    de humor, palavras não características, etc.
</div>

<div class="contato" a id="cont">
    <h3>contatos</h3>
    O trecho padrão original de Lorem Ipsum, usado desde o século XVI, está reproduzido abaixo para os interessados. Seções 1.10.32
    e 1.10.33 de "de Finibus Bonorum et Malorum" de Cicero também foram reproduzidas abaixo em sua forma exata original,
    acompanhada das versões para o inglês da tradução feita por H. Rackham em 1914.
</div>

</div>