Miniaturecon testo mobile

**sviciani** · 11-05-2015, 19:46

Scusatemi pr il titolo ma non sapevo come descriverlo.
Sono alla ricerca di un sistema Javascript (od altro) che faccia l'effetto delle miniature di questo sito: www.sienanews.it
Quelle (anche piccole) che sono più opache in basso e su cui scorre il testo quando si passa sopra col mouse.
Questo sito è stato fatto con Wordpress, mentre io voglio integrarle sul mio sito fatto in HTML tradizionale.
E' possibile? Esiste qualcosa di simile? Semplice da usare.
Magari che si ridimensioni quando lo schermo è più piccolo (una finestra per esempio, oppure un cellulare)

Grazie

**badaze** · 11-05-2015, 20:03

Hai provato a guardare il sorgente html della pagina ?

**sviciani** · 11-05-2015, 20:31

Originariamente inviata da badaze

Hai provato a guardare il sorgente html della pagina ?

Si ma ci ho capito poco. È piuttosto complicato capire dove sono le varie funzioni e come personalizzarla (ammesso e non concesso di trovarle).
Dopo quasi una giornata di arrabbiature, ho deciso di chiedere.
Quello è WP.
Magari c'è qualcosa di simile e più semplice in giro (spero)

**cavicchiandrea** · 12-05-2015, 01:05

Originariamente inviata da sviciani

... Magari c'è qualcosa di simile e più semplice in giro (spero)

Io mi dedicherei alla ricerca, trovare qualcuno che lo faccia per te potrebbe essere improbabile.
E comunque trovare qualcosa di semplice ritengo sia impossibile.

**badaze** · 12-05-2015, 01:10

Non è uguale a quello della pagina ma non sono ferrato in css.

codice HTML:

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
a:link         {text-decoration:none}
a:hover .mytx1 {position:absolute;
                top:100px;left:1px;                          
        }
a:hover .mytx2 {position:absolute;
                top:150px;left:1px;
        display:block;          
        }
        
.mydiv   {position:relative;width:270px;height:225px;}
.myimg   {position:absolute;z-index:1}
.mytx1   {position:absolute;top:150px;width:268px;left:1px;z-index:2;font-size:100%;
          font-family:verdana;color:white;font-weight:bold;
      text-transform: uppercase;text-align:center; } 
     
.mytx2   {position:absolute;top:230px;width:268px;left:1px;z-index:2;font-size:100%;
          font-family:verdana;color:white;font-weight:bold;
      text-align:center;display:none; 
     }      
   
-->
</style>
</head>
<body>
<table summary="">
<tr>
<td>
<!-- prima immagine -->
<a href="">
 <div class="mydiv">
  <div class="myimg">
    <img width="270" height="225" src="http://sienanews.it/wp-content/uploads/2015/05/tennis-270x225.png" alt="lorenzi-williamhill" />
 </div>
  <div class="mytx1">
      Tennis: sorteggio non facile per il senese Lorenzi
  </div> 
  <div class="mytx2">
  <br/>Gli Internazionali di Tennis, il torneo di tennis più importante del nostro paese che si&nbsp;&hellip;
 </div>
 </div>
</a>
</td>
<td>
<!-- seconda immagine -->
<a href="">
 <div class="mydiv">
  <div class="myimg">
    <img width="270" height="225" src="http://sienanews.it/wp-content/uploads/2015/05/tennis-270x225.png" alt="lorenzi-williamhill" />
 </div>
  <div class="mytx1">
      Tennis: sorteggio non facile per il senese Lorenzi
  </div> 
  <div class="mytx2">
  <br/>Gli Internazionali di Tennis, il torneo di tennis più importante del nostro paese che si&nbsp;&hellip;
 </div>
 </div>
</a>
</td>
</tr>
</table>
</body>
</html>

**sviciani** · 12-05-2015, 07:55

Grazie infinite. L'ho provato e mi piace.
Ora devo vedere quanto si adatta bene al mio sito www.viciani.com (i pareri sono ben accetti)
Per adesso ho sempre il vecchio stile sul sito.
L'unica mia perplessità è che le scritte sulla foto si leggano male in caso di foto, come alcune delle mie, a sfondo bianco.
Ci devo lavorare su, ci devo pensare. Potrei far diventare b/n e scura la foto quando c'è il mouse sopra (devo trovare come ma non è complicatissimo) ma normalmente si leggerebbe male lo stesso.

Un'altra cosa: queste miniature e le loro scritte non sono ridimensionabili a seconda della finestra del browser.
E' possibile ridimensionarle automaticamente? In questo caso le scritte dovrei inserirle direttamente nella foto (anzichè come testo)?

Altra opzione:
Se, invece, volessi che lo sfondo del rettangolo invisibile che include il testo fosse trasparente, ma con una opacità impostabile, come dovrei fare?
In questo modo la foto avrebbe sempre una scritta visibile inserita in una fascia meno trasparente, ma non opaca (se vede la foto in trasparenza ma più scura)
Non so se mi sono spiegato.
Praticamente dovrei modificare la trasparenza del <div>

Grazie

**sviciani** · 13-05-2015, 09:35

Non c'è un modo per impostare la trasparenza in un <div> dove ci sono le scritte (vedi l'esempio sopra di "badaze")

.mytx1 {position:absolute;top:150px;width:268px;left:1px; z-index:2;font-size:100%;
font-family:verdana;color:white;font-weight:bold;
text-transform: uppercase;text-align:center; }

<div class="mytx1">
Tennis: sorteggio non facile per il senese Lorenzi
</div>

Non c'è un'opzione sulla trasparenza? O sullo sfondo?
Dove posso trovare una descrizione sintetica di TUTTE le opzioni?

**cavicchiandrea** · 13-05-2015, 09:44

Originariamente inviata da sviciani

Non c'è un'opzione sulla trasparenza? O sullo sfondo?
Dove posso trovare una descrizione sintetica di TUTTE le opzioni?

documentati css3 color-background

**sviciani** · 13-05-2015, 09:57

Grazie infinite (non ce la faccio a star dietro a tutte le novità, scusami....)

**WottaFacca** · 13-05-2015, 10:26

Vai su questo sito è pieno di esempi utili, nella barra di ricerca sotto la barra gialla scrivi effetto e apri la sezione "EFFETTO HOVER CSS E JAVASCRIPT", ci sono 2 effetti molto simili a quelli che stai cercando tu

Discussione: Miniaturecon testo mobile

Strumenti discussione

Ricerca discussione

Visualizza

Miniaturecon testo mobile

Permessi di invio