description call (HOVER)

Question

description call (HOVER)

Navigation

#1 by (1 votes)

0

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

I would like that when the user hover over an image a certain description is displayed, here is my code 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;
}

.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>

html css

asked by anonymous 13.04.2018 / 04:49

1 answer

Angular2-text-mask Retrieve captured id with JS in modal

score 1 · Accepted Answer

Wagner will have to go through stages.

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

Another thing. you have a <section> and a div with the section section <div class="section"> and I think it made you confuse some things in CSS. But I've adjusted this by putting div.section {} to not mess around much on what you've already done.

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

Run on "All Page" to see the result better since the code is still not responsive. OBS: I have the minimum possible 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>