Immagini che "si scuriscono" e sovrapposizione testo

**rubikk** · 09-09-2013, 11:49

Salve a tutti, sto provando a realizzare un sito e in una delle pagine ho una sequenza di immagini (che fanno anche da link ad altre pagine) su cui volevo realizzare del tipo "mouse sull'immagine-immagine scura-titolo che compare".
A far diventare "opaca" l'immagine sono riuscito, non riesco però a far comparire un testo che si posizioni al centro della stessa. Vi allego i codici sperando che possiate darmi una mano (anche perché sono partito da un template e a volte ho un po' di difficoltà a capire cosa posso cambiare e come).

Grazie!

Codice della pagina:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="css/globalStyle.css" type="text/css" />
<link href="css/menuStyle.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' src='menu_jquery.js'></script>
<title>Pagina personale del Dott. C. Q.</title>
</head>

<body>


<div id="wrap">
  <div id="header">
    <div id="header-content">
      <h1 id="logo">C. <span class="gray">Q.</span></h1>
      <h2 id="slogan">Odontoiatra e protesista dentale</h2>
      
      
      <ul>[*]Home[*]News[*]Terapie[*]F.A.Q.[*]Link[*]Contatti[/list]
    </div>
  </div>
  
  
  <div id="content-wrap">
    <div id="content">
      <div id="main">
        <div class="post image-container">
        [img]images/terapie-img/diagnosi1.png[/img] [img]images/terapie-img/igiene1.png[/img] [img]images/terapie-img/paradontologia1.png[/img] [img]images/terapie-img/implantoprotesi1.png[/img] </div>
    </div>
    <div id="sidebar" >
      <div class="sidebox">
        <div id="cssmenu">
          <ul>
            <li class="active"><span>Home</span>
            <li class="has-sub"><span>Terapie</span>
              <ul>[*]<span>Diagnosi</span>[*]<span>Igiene</span>[*]<span>Paradontologia</span>[*]<span>Implantoprotesi</span>[*]<span>Pedodonzia</span>[*]<span>Estetica</span>[*]<span>Ortodonzia</span>[*]<span>Conservativa</span>[*]<span>Endodonzia</span>[*]<span>Chirurgia</span>[*]<span>Protesi</span>
                <li class="last"><span>Gnatologia</span>[/list]
            [*]<span>News</span>[*]<span>FAQ</span>[*]<span>Contatti</span>
            <li class="last"><span>Link</span>[/list]
        </div>
      </div>
      
      <div class="sidebox">
        <h1>Parole Sagge...</h1>
        

La bocca senza mascellari è come un mulino senza macina, e in molto maggior conto devesi tenere un dente che un diamante. </p>
        <p class="align-right">- Miguel de Cervantes</p>
      </div>
    </div>
    
     
    
     
  </div>
</div>


<div id="footer">
  <div id="footer-content">
    <div class="col float-left">
      <h1>Contatti</h1>
      

Indirizzo: via Gaetano Donizetti 7/B

        00198, Roma</a></p>
      

Numero di telefono: 06-84242234</p>
      

Indirizzo e-mail: <a href = "mailto:quarantaciro@gmail.com" >quarantaciro@gmail.com</a></p>
    </div>
    <div class="col float-left">
      <h1>Social Network</h1>
      <div> [img]images/fbicon.png[/img] facebook </div>
      <div> [img]images/twicon.png[/img] twitter </div>
    </div>
    <div class="col2 float-right">
      

 &copy; copyright 2013 Vee

        Design by: styleshout  
        Valid CSS | XHTML </p>
      <ul>[*]Home[*]Sitemap[*]RSS Feed[/list]
    </div>
  </div>
</div>
 


</div>
</body>
</html>

**rubikk** · 09-09-2013, 11:54

Questo invece è il foglio di stile, che data l'eccessiva lunghezza del messaggio non sono riuscito a inserire nel primo post:

codice:

/********************************************
   HTML ELEMENTS
********************************************/ 

/* top elements */
* {
	padding: 0;
	margin: 0;
}
body {
	margin: 0;
	padding: 0;
	font: normal 73%/1.5em 'Trebuchet MS', Tahoma, sans-serif;
	color: #555;
	background: #FFF url(../images/bg_verde_tx2.jpg) repeat-x;
	text-align: center;
}
/* links */
a {
	background: inherit;
	color: #72A545;
	text-decoration: none;
}
a:hover {
	background: inherit;
	color: #006699;
	text-decoration: underline;
}
/* headers */
h1, h2, h3 {
	font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
}
h1 {
	font-size: 1.4em;
	color: #00cc33;
}
h2 {
	font-size: 1.2em;
	text-transform: uppercase;
}
h3 {
	font-size: 1.2em;
}
p, h1, h2, h3 {
	margin: 10px 15px;
}
ul, ol {
	margin: 10px 30px;
	padding: 0 15px;
}
/* images */
img {
	border: 1px solid #DADADA;
	padding: 5px;
	background: #FAFAFA;
}
img.float-right {
	margin: 5px 0px 5px 15px;
}
img.float-left {
	margin: 5px 15px 5px 0px;
}
code {
	margin: 5px 0;
	padding: 10px;
	text-align: left;
	display: block;
	overflow: auto;
	font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
	/* white-space: pre; */
	background: #FAFAFA;
	border: 1px solid #f2f2f2;
	border-left: 3px solid #72A545;
}
acronym {
	cursor: help;
	border-bottom: 1px solid #777;
}
blockquote {
	margin: 15px;
	padding: 0 0 0 20px;
	background-color: #FAFAFA;
	background-position: 8px 10px;
	border: 1px solid #f2f2f2;
	border-left: 3px solid #72A545;
	font: bold 1.2em/1.5em "Trebuchet MS", Tahoma, sans-serif;
	color: #666666;
}

/***********************
	  LAYOUT
************************/

#header-content, #content, #footer-content {
	width: 760px;
}
/* header */
#header {
	height: 100px;
	text-align: left;
}
#header-content {
	margin: 0 auto;
	padding: 0;
	position: relative;
}
#header-content h1#logo {
	position: absolute;
	font: bold 45px 'Trebuchet MS', Sans-serif;
	letter-spacing: -2px;
	color: #FFF;
	margin: 0;
	padding: 0;
	/* change the values of left and top to adjust the position of the logo */
	top: 0;
	left: 0px;
}
#header-content h1#logo a {
	text-decoration: none;
	color: #FFF;
}
#header-content #slogan {
	position: absolute;
	font: bold 12px 'Trebuchet Ms', Sans-serif;
	text-transform: none;
	color: #FFF;
	margin: 0;
	padding: 0;
	/* change the values of left and top to adjust the position of the slogan */
	top: 50px;
	left: 40px;
}
/* header menu */
#header-content ul {
	position: absolute;
	right: -5px;
	top: 15px;
	font: bolder 1.3em 'Trebuchet MS', sans-serif;
	color: #FFF;
	list-style: none;
	margin: 0;
	padding: 0;
}
#header-content li {
	display: inline;
}
#header-content li a {
	float: left;
	display: block;
	padding: 3px 12px;
	color: #FFF;
	background-color: #004415;
	text-decoration: none;
	border-right: 1px solid #272727;
}
#header-content li a:hover {
	background: #00cc33;
	color: #FFF;
}
#header-content li a#current {
	background: #00cc33;
	color: #FFF;
}
/* header photo */
.headerphoto {
	margin: 0 auto;
	width: 770px;
	height: 200px;
	padding: 15px 10px 10px 10px;
	background: #FFF url(../images/headerCiro.jpg) no-repeat center;
}
/* content */
#content-wrap {
	clear: both;
	float: left;
	width: 100%;
}
#content {
	text-align: left;
	padding: 0;
	margin: 0 auto;
}
/* sidebar */
#sidebar {
	float: right;
	width: 30%;
	margin: 0 0 10px 0;
	padding: 0;
}
#sidebar h1 {
	padding: 10px 0px 5px 10px;
	margin: 0;
	font: bold 1.3em 'Trebuchet MS', Tahoma, Sans-serif;
}
.sidebox {
	background: #F5F5F5;
	border: 1px solid #EFEDED;
	margin-top: 5px;
	margin-bottom: 10px;
}
/* sidebar menu */
#sidebar ul.sidemenu {
	list-style: none;
	margin: 10px 0 15px 0;
	padding: 0;
	background: #F2F2F2;
}
#sidebar ul.sidemenu li {
	padding: 0px 10px;
}
#sidebar ul.sidemenu a {
	display: block;
	font-weight: normal;
	color: #333;
	height: 1.5em;
	padding: .3em 0 .3em 15px;
	line-height: 1.5em;
	border-bottom: 1px dashed #D4D4D4;
	text-decoration: none;
}
#sidebar ul.sidemenu a.top {
	border-top: 1px dashed #D4D4D4;
}
#sidebar ul.sidemenu a:hover {
	padding: .3em 0 .3em 10px;
	border-left: 5px solid #1264e0;
	color: #1264e0;
}
/* main */
#main {
	float: left;
	width: 68%;
	margin: 0 0 10px 0;
	padding: 0;
}
#main h1 {
	padding: 10px 0px 0px 5px;
	margin: 0 0 0 10px;
	border-bottom: 1px solid #f2f2f2;
	font: normal 1.5em 'Trebuchet MS', Tahoma, Sans-serif;
}
#main ul li {
	list-style-image: url(bullet.gif);
}
.post {
	margin: 0;
	margin-top: 5px;
	padding: 0;
	background: #FFF url(gradientbg.jpg) repeat-x;
	border: 1px solid #EFEDED;
}
.post .post-footer {
	background-color: #FAFAFA;
	border: 1px solid #f2f2f2;
	padding: 5px;
	margin-top: 20px;
	font-size: 95%;
}
.post .post-footer .date {
	background: url('clock.gif') no-repeat 0 center;
	padding-left: 20px;
	margin: 0 10px 0 5px;
}
.post .post-footer .comments {
	background: url('comment.gif') no-repeat 0 center;
	padding-left: 20px;
	margin: 0 10px 0 5px;
}
.post .post-footer .readmore {
	background: url('page.gif') no-repeat 0 center;
	padding-left: 20px;
	margin: 0 10px 0 5px;
}
/* footer */
#footer {
	clear: both;
	margin: 0;
	padding: 0;
	font: normal .95em/1.6em 'Trebuchet MS', Tahoma, Arial, sans-serif;
	text-align: left;
}
#footer h1, #footer p {
	margin-left: 0;
}
#footer-content {
	border-top: 1px solid #EAEAEA;
	margin: 0 auto;
	padding-left: 15px;
}
#footer-content a {
	text-decoration: none;
	color: #777;
}
#footer-content a:hover {
	text-decoration: underline;
	color: #333;
}
#footer-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#footer-content .col {
	width: 32%;
	padding: 0 5px 30px 0;
}
#footer-content .col2 {
	width: 33%;
	padding: 0 0 30px 0;
}

/* "darken images on mouse hover" style */
a.darkencss {
	display: inline-block;
	background: black;
	padding: 0;
}

a.darkencss img {
	display: block;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
a.darkencss:hover img {
	opacity: 0.7;
}

/* Text overlay */
a.hovertext {
	position: relative;
	text-decoration: none !important;
	text-align: center;
}
a.hovertext:after {
	content: attr(title);
	position: absolute;
	left: 0;
    bottom: 0;
    padding: 0.5em 20px;
	background: rgba(0,0,0,0.8);
	text-decoration: none !important;
	color: #fff;
	opacity: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}
a.hovertext:hover:after, a.hovertext:focus:after {
	opacity: 1.0;
}

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }

/* additional classes */
.clear {
	clear: both;
}
.gray {
	color: #BFBFBF;
}
.simpleimage {
	border: none;
	background: none;
	padding: 1px;
}
.image-container {
	display: inline-block;
	position: relative;
}

**rubikk** · 11-09-2013, 13:59

Ho trovato una soluzione usando questo codice:

codice:

.imgWrap {
	display: inline-block;
	position: relative;
}
.imgDescription {
	display: block;
	position: absolute;
	font-size: 18px;
	text-align: center;
	line-height: 160px;
	left: 0;
	top: 0;
	width: 100%;
	height: 97%;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.imgWrap:hover .imgDescription {
	visibility: visible;
	opacity: 1;
}

La cosa funziona ad eccezione di un piccolo problema che ho illustrato in questo nuovo
post, spero che magari qualcuno leggendo qui possa trovare utile questo codice e/o trovare una soluzione al mio problema!

Discussione: Immagini che "si scuriscono" e sovrapposizione testo

Strumenti discussione

Ricerca discussione

Visualizza

Immagini che "si scuriscono" e sovrapposizione testo

Permessi di invio