Visualizzazione testo al LATO dell'immagine al passaggio del mouse

17-09-2014, 14.48.07

Ragazzi volevo far comparire al lato dell'immagine un testo, ma esso dovrà comparire solo quando io vado con il cursore sul'immagine.
Preciso che il testo non deve andare sopra l'immagine quindi non ditemi con "alt".

**NLSweb** · 17-09-2014, 15.02.52

Con CSS stato HOVER ...

esempio:
HTML

Codice HTML:

<img src="percorso foto" />
<p>testo</p>

CSS

Codice:

img p{
 opacity:0;
}
img:hover p{
 opacity:1;
}

per il posizionamento dipende come hai impostato la struttura HTML ... comunque se hai un IMG con dimensione nota , ti basta defnire nel CSS la posizione del testo ; esempio:

CSS (ipotizziamo un IMG con width 100px e height 100px)

Codice:

p{
 position:relative;
 bottom:100px;
 left:100px;
}

17-09-2014, 15.13.26

Scusami ma io all'immagine ho già un hover o meglio un not hover... Guarda:

.imgweb
{
opacity:1;
transition: all .2s ease;
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px; /* firefox */
-webkit-border-radius: 10px 10px 10px 10px; /* safari, chrome */
}

.imgweb:not(:hover){
opacity: 0.5;
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px; /* firefox */
-webkit-border-radius: 10px 10px 10px 10px; /* safari, chrome */
}

**NLSweb** · 17-09-2014, 15.26.23

Non ha molto senso quello che hai scritto...........

1) lo stato HOVER identifica quando il mouse si posiziona sopra l'elemento
2) definisci una classe per l'immagine senza definire alcuno stato , quindi quando l'immagine verra' visualizzata avra' le caratteristiche CSS che gli hai assegnato
3) definisci la stessa classe con lo stato hover (o un altro stato) per modificare l'immagine al passaggio del mouse

ora tu vuoi che il testo appaia a lato della foto quando ci passi sopra con il mouse
quindi devi definire una classe per il testo con la condizione di stato hover dell'immagine
come ti ho mostrato nell'esempio.

se hai altri dubbi chiedi pure...

17-09-2014, 15.32.56

io ho fatto cosi perche volevo che l'immagine al passaggio del mouse si "illuminasse" grazie a opacity... infatti funziona, ma non riesco a gestire il fatto del testo.
Ecco per essere piu precisi: http://www.ramishapp.altervista.org/RamishWeb/?p=2

**NLSweb** · 17-09-2014, 15.42.33

Ecco un esempio funzionante DEMO

devi definire il CSS per la foto quando viene caricata (opacity:0.5)
il CSS per la foto in stato Hover (opacity:1)
il CSS del testo quando viene caricato (opacity:0)
ed il CSS per il testo quando ti trovi con il mouse sopra l'immagine (opacity:1)

Codice HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title></title>
<style>
 
 .foto img{
  width:100px;height:100px;
  opacity:0.5
 }
 .foto h1{
  position:relative;
  bottom:100px;left:100px;
  opacity:0;
 }
 .foto:hover h1{
  opacity:1;
 }
 .foto:hover img{
  opacity:1;
 }

</style>
</head>
<body>
<div class="foto">
 <img src="foto/1.jpg" />
 <h1>TESTO</h1>
</div>
</body>
</html>

17-09-2014, 15.56.03

Grazie mille funziona :D.. Volevo chiederti come si chiama tutto questo in css oltre all'hover??? pseudoclassi? e in piu posso sostituire al posto di h1 <p> e dargli una classe?

**NLSweb** · 17-09-2014, 16.07.08

CSS Selector

non c'e' bisogno di assegnare una classe a P , visto che hai gia' una classe a monte .. nel DIV

essendo una struttura gerarchica , se crei un elemento e gli assegni una classe , ogni sotto elemento potra' essere richiamata riferendoti alla classe del PARENT.

esempio:

ROOT (PARENT di elemento1 ed elemento2)

elemento 1 (CHILD di ROOT / Siblings di elemento2 / PARENT di sottoelemento1di1 , sottoelemento2di1)
----sottoelemento1di1 (CHILD di elemento1 e Siblings di sottoelemento2di1)
----sottoelemento2di1 (CHILD di elemento1 e Siblings di sottoelemento1di1)

elemento2 (CHILD di ROOT / Siblings di elemento1 / / PARENT di sottoelemento1di2 , sottoelemento2di2)
----sottoelemento1di2 (CHILD di elemento2 e Siblings di sottoelemento2di2)
----sottoelemento2di2 (CHILD di elemento2 e Siblings di sottoelemento1di2)

17-09-2014, 16.09.26

quindi se voglio cambiare il tipo di scrittura lo cambio dal DIV principale?

**NLSweb** · 17-09-2014, 16.19.27

cosa intendi per tipo di scrittura ?

per capirci , in HTML definisci una struttura con i CSS definisci l'aspetto grafico

se vuoi cambiare il font , la dimensione , il colore , ecc. ; usi CSS

esempio:

Codice:

.foto h1{
  font-family:Arial, sans-serif;
  font-size:18px;
  color:red;
 }

17-09-2014, 20.57.31

Mi spieghi come fa a capire che deve cambiar eil tipo di scrittura se prima chiama la classe .foto?

**NLSweb** · 17-09-2014, 21.51.21

mantenendo in mente la struttura gerarchica del sito ,

.foto h1

e' uguale a dire: tutti gli elementi H1 all'interno della classe FOTO

cosi come

.foto img

e' uguale a dire: tutti gli elementi IMG all'interno della classe FOTO

in pratica il DIV e' il PARENT del suo contenuto , quindi in questo caso di IMG e di H1 che sono i suoi CHILD

quando chiamo la classe che ho assegnato al DIV , ogni cosa posta di seguito fa riferimento ai suoi CHILD

esempio:
ogni DIV avendo la stessa classe avra' gli stessi stili CSS , e non dovrai scrivere gli stili per ogni singolo elemento.

Codice HTML:

<div class="mioDIV">
  <img src="foto1" />
  <h1>testo1</h1>
</div>

<div class="mioDIV">
  <img src="foto2" />
  <h1>testo2</h1>
</div>

esempio:

Codice HTML:

<div class="menu">
  <ul>
  <li>
      <h1>Voce1</h1>
      <div class="sottomenu">
       <ul>
        <li><h2>Sottomenu1 Voce1</h2></li>
        <li><h2>Sottomenu2 Voce1</h2></li>
        <li><h2>Sottomenu3 Voce1</h2></li>    
       </ul>
      </div>
  </li>
  <li>
      <h1>Voce2</h1>
      <div class="sottomenu">
       <ul>
        <li><h2>Sottomenu1 Voce2</h2></li>
        <li><h2>Sottomenu2 Voce2</h2></li>
        <li><h2>Sottomenu3 Voce2</h2></li>    
       </ul>
      </div>
  </li>
  </ul>
</div>

CSS

Codice:

.menu{
 definisci lo stile del DIV del menu
}
.menu li{
 definisci lo stile del riquadro relativo alla voce di menu
}
.menu h1{
 definisce lo stile del testo delle voci del menu
}

.sottomenu{
 definisci lo stile del DIV del sottomenu
}
.sottomenu li{
 definisci lo stile del riquadro relativo alla voce di sottomenu
}
.menu h2{
 definisce lo stile del testo delle voci del sottomenu
}

Discussione: Visualizzazione testo al LATO dell'immagine al passaggio del mouse

LinkBack

Strumenti discussione

Display

Visualizzazione testo al LATO dell'immagine al passaggio del mouse

Regole di scrittura