18041 sujets

Questions générales et questions de débutants

Créer un hover dans wordpress.com

Bonjour,

je suis totalement débutante dans le domaine du HTML/CSS, j'ai fait de nombreux forum et visionné plusieurs tuto cependant le langage est généralement trop compliqué pour mon niveau.

Je souhaiterais intégrer dans mon wordpress.com un hover permettant d'avoir le même rendu que la présentation d'agence (changement de photo + ajout de texte ) de ce site : http://www.agenceten.com/index.php?section=agence

Est-ce possible sur wordpress sachant que je ne peux pas installer de plugin ?

Merci d'avance pour vos retours !
Si tu es débutante cela risque d'être malheureusement très compliqué pour toi.

Eux, ils utilisent Boostrap, je sais pas si tu connais mais c'est un framework css.

Et là leur HTML : 
<div class="col-md-4" style="margin:0;padding:0;">
						<div id="logo" class="bloc_lego">
							<div class="main">
								<div class="view view-sixth">
									<img src="vue/img/team_photos/pierre-ten-2015-1.png" width="100%">
									<div class="mask mask_img1">
										<h2>PIERRE<br>JEANNESSON</h2>
										<p>DIRECTEUR</p>
									</div>
								</div> 
							</div>
						</div>
</div>


et c'est sur la div view-sixth qu'ils ont mis leur :hover avec transition css 
 .view-sixth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-sixth:hover img {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-sixth:hover h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-sixth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-sixth:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}


et sur leur marsk1 (mask2 etc..) on retrouve la seconde image : 

.mask_img1{
   background-image:url(../img/team_photos/pierre-ten-2015-2.png);
   background-size:100%;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-in 0.4s;
   -moz-transition: all 0.3s ease-in 0.4s;
   -o-transition: all 0.3s ease-in 0.4s;
   -ms-transition: all 0.3s ease-in 0.4s;
   transition: all 0.3s ease-in 0.4s;
}
Sujet clos
Aller à