CSS3: effetto hover box autore

Il mondo dei CSS è sconfinato, si possono ottenere effetti strabilianti.
Personalmente preferisco non esagerare e utilizzare gli effetti soltanto per dare un tocco in più ad un’immagine oppure ad un testo.

Nel tutorial di oggi vi presento un effetto semplicissimo.
Si tratta di un box con un’immagine e del testo a fianco:

quando, con il puntatore del mouse, andiamo sul testo esso sovrappone all’immagine un altro testo (in questo caso una descrizione dell’autore).
Si può utilizzare per diversi scopi, la fantasia è l’unico limite.

Ecco l’esempio:

See the Pen CSS3 Hover test by Eugenio (@rupertone) on CodePen.0

Questo è il semplice HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS hover</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="container">
		<h1>
			CSS3 Effetti Hover
		</h1>
		<div class="author">
			<img src="https://s15.postimg.org/yj18k5w0b/image.jpg" alt="image">
			<div class="author-testo-hover">
			      <h3>Eugenio Corrao</h3>
			      <h4>Web Design</h4>
			      <p>Nulla rhoncus orci sed odio euismod vestibulum. Praesent porta aliquet nulla, ut mattis velit rhoncus eu duspendisse nibh orci laoreet. </p>
   		    </div>
   		    <div class="author-sfondo author-testo">
		      <p>Eugenio Corrao</p>
		      <a href="https://twitter.com/eugenione">@eugenione</a>
		    </div>
			
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS hover</title>

</head>

<body>

<h1>

CSS3 Effetti Hover

</h1>

<h3>Eugenio Corrao</h3>

<h4>Web Design</h4>

<p>Nulla rhoncus orci sed odio euismod vestibulum. Praesent porta aliquet nulla, ut mattis velit rhoncus eu duspendisse nibh orci laoreet. </p>

</div>

<p>Eugenio Corrao</p>

<a href="https://twitter.com/eugenione">@eugenione</a>

</div>

</body>

</html>

E questo é il codice CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

body {
  background:#2ecc71;
}

#container {
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  margin-top:10%;
}

h1 {
  font-family: "Open Sans", sans;
  font-weight:300;
  text-align:center;
  color:rgba(255,255,255,0.6)
}

h2 {
  color:#2c3e52;
  font-family:  "Open Sans", sans;
  font-size: 14px;
  text-align:center;
  font-weight:700;
  margin-bottom:50px;
  
}

.author {
   /*width: 460px;*/
   height: 250px; 
   /*height: 230px;*/
   overflow: hidden;
   position: relative;
}

.author img {
   position: absolute;
   top: 0;
   left: 0;
   height: inherit;
   width: auto;
   height: 100%;
   float: left;
   transition: all 0.8s;
   -moz-transition: all 0.8s;

}

.author:hover img {
   /*opacity: 0.4 !important;*/
}

.author .author-testo-hover h3 {
   padding: 0px;
   margin: 0px;
   font-size: 25px;
  font-weight:300;
   font-family: "Open Sans";
}

.author .author-testo-hover h4 {
   padding: 0px;
   padding-bottom: 13px;
   margin: 0px;
   font-size: 14px;
  letter-spacing: 3px;
   width: 90%;
   font-family: "Open Sans";
  text-transform:uppercase;
   border-bottom: 2px solid #000;
}

.author .author-testo-hover p {
   padding-top: 13px;
   font-size: 14px;
   line-height: 20px;
   font-family: "Open Sans";
}


.author .author-testo-hover{
   width: 42%;
   height: 89%;
   position: absolute;
   top: 0%;
   left: 50%;
   padding: 3% 4%;
   background: #D90E0E;
   color: rgba(255,255,255,1);
/* display: none;*/
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.4s;
}

.author:hover .author-testo-hover {
   display: block !important;
   color: rgba(255,255,255,1);
   background:rgba(217,14,14,0.85);
   left: 0px;
   top: 0px;
}


.author .author-testo {
   width: 50%;
   height: inherit;
   background: #000;
   float: left;
   position: absolute;
   left: 50%;
}

.author .author-testo p {
   padding:100px 0px 0px 20px;
   font-size: 24px;
   font-family: "Open Sans";
  font-weight:700;
   color: #fff;
}

.author .author-testo p span {
   font-family: "Open Sans" !important;
}

.author .author-testo a , .author-sfondo .author-testo {
   padding: 0px 0px 0px 20px;
   font-size: 14px !important;
   color:#FF5A22 !important;
   font-family: "Open Sans" !important;
   text-decoration: none !important; 
}

.author .author-testo {
   float: left;
} 

.author-sfondo {
   background: #eee !important;
   width: 50% !important;
   height: inherit !important;
}

.author-sfondo p {
   color: #000 !important;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

body {

background:#2ecc71;

}

#container {

max-width:500px;

margin-left:auto;

margin-right:auto;

margin-top:10%;

}

h1 {

font-family: "Open Sans", sans;

font-weight:300;

text-align:center;

color:rgba(255,255,255,0.6)

}

h2 {

color:#2c3e52;

font-family: "Open Sans", sans;

font-size: 14px;

text-align:center;

font-weight:700;

margin-bottom:50px;

}

.author {

/*width: 460px;*/

height: 250px;

/*height: 230px;*/

overflow: hidden;

position: relative;

}

.author img {

position: absolute;

top: 0;

left: 0;

height: inherit;

width: auto;

height: 100%;

float: left;

transition: all 0.8s;

-moz-transition: all 0.8s;

}

.author:hover img {

/*opacity: 0.4 !important;*/

}

.author .author-testo-hover h3 {

padding: 0px;

margin: 0px;

font-size: 25px;

font-weight:300;

font-family: "Open Sans";

}

.author .author-testo-hover h4 {

padding: 0px;

padding-bottom: 13px;

margin: 0px;

font-size: 14px;

letter-spacing: 3px;

width: 90%;

font-family: "Open Sans";

text-transform:uppercase;

border-bottom: 2px solid #000;

}

.author .author-testo-hover p {

padding-top: 13px;

font-size: 14px;

line-height: 20px;

font-family: "Open Sans";

}

.author .author-testo-hover{

width: 42%;

height: 89%;

position: absolute;

top: 0%;

left: 50%;

padding: 3% 4%;

background: #D90E0E;

color: rgba(255,255,255,1);

/* display: none;*/

transition: all 0.5s ease-in-out;

-moz-transition: all 0.4s;

}

.author:hover .author-testo-hover {

display: block !important;

color: rgba(255,255,255,1);

background:rgba(217,14,14,0.85);

left: 0px;

top: 0px;

}

.author .author-testo {

width: 50%;

height: inherit;

background: #000;

float: left;

position: absolute;

left: 50%;

}

.author .author-testo p {

padding:100px 0px 0px 20px;

font-size: 24px;

font-family: "Open Sans";

font-weight:700;

color: #fff;

}

.author .author-testo p span {

font-family: "Open Sans" !important;

}

.author .author-testo a , .author-sfondo .author-testo {

padding: 0px 0px 0px 20px;

font-size: 14px !important;

color:#FF5A22 !important;

font-family: "Open Sans" !important;

text-decoration: none !important;

}

.author .author-testo {

float: left;

}

.author-sfondo {

background: #eee !important;

width: 50% !important;

height: inherit !important;

}

.author-sfondo p {

color: #000 !important;

}

Semplicità con un tocco di stile:)

Scarica i files del tutorial

Autore Eugenio Corrao

Lascia un commento Annulla risposta

CSS3: effetto hover box autore

Autore Eugenio Corrao

Post che potrebbero interessarti

Lascia un commento Annulla risposta