insérer carré sur image en hover

novis · 18 Août 2017

Bonjour,

J'ai crée un texte qui s'affiche lors du survol de ma souris sur une image. Je souhaite désormais y intégrer un carré qui apparaitrait également lors du survol mais je n'y parviens pas.

J'ai fais plusieurs tests etc... mais rien de concluant. Pour l'idée, j'aimerai l'effet "oscar" présent sur ce site :

http://epicadesign.fr/demos/HoverEffectImg/index.html

Si quelqu'un peut me dire quel code intégrer, ce serait super!

Merci d'avance

Novis

**Dan** · 18 Août 2017

Bonjour et bienvenue sur Webmaster-Hub !

Le css pour l'effet "oscar" tel que défini dans le fichier "set1.css" est le suivant :

/***** Oscar *****/
/*---------------*/

figure.effect-oscar {
    background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}

figure.effect-oscar img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
    padding: 3em;
    background-color: rgba(58,52,42,0.7);
    -webkit-transition: background-color 0.35s;
    transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
}

figure.effect-oscar h2 {
    margin: 20% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

figure.effect-oscar:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-oscar:hover figcaption {
    background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
    opacity: 0.4;
}

/*---------------*/

novis · 18 Août 2017

Merci Dan pour votre réponse,

Effectivement j'avais repéré ce code css néanmoins je n'arrive pas à identifier les lignes correspondants au carré qui apparaît lors du survol de la souris! Cela fait 5jours que je cherche mais pas moyen de trouver...

J'ai fait plusieurs test et il n'y à rien de concluant.

De plus, je souhaite savoir comment intégrer ce code. Imaginons que dans mon html la vignette est défini par item. Sur ce code au lieu de mettre figure.effect-oscar je dois mettre item. carre?

Ou alors je ne dois rien changer au code?

Merci de m'éclairer

novis

novis · 18 Août 2017

J'ai également trouvé ce code mais cela ne fonctionne pas non plus:

.rectangle {
    position:absolute;
    top:100px;
    left:100px;
    width:300px;
    height:200px;
    border:1px solid transparent;
    transition:0.5s;
     
}

.rectangle:hover {
    border:1px solid red;
    width:350px;
    height:250px;
    top:75px;
    left:75px;
}

voici le code css de ma page:

</script>
<style>
body 
	{<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}


.item {
	width:250px;
	height:250px;	
	border:2px solid #222;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;


}



.item .caption {
	width:250px;
	height:250px;
	background:#000;
	color:#fff;
	font-weight:light;
        text-align:center;
        line-height:normal;
        

      
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}


.item .caption a {
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:normal;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
       

	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}

.item .caption b {
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:bold;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
       


	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}

.item .caption p {
	padding:2px; 2px; 5px; 2px;
	margin:2;
	font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
         
}

.item img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

.clear {
	clear:both;	
}
</style>
>

Je ne sais pas comment l'intégrer. J'ai cherché, modifié, remodifié mon code en vain.

Le carre ne s'affiche pas au survol de la souris dans ma vignette.

J'espère que vous pourrez m'aider et que enfin je pourrai comprendre ce que je ne fais pas correctement!!

Merci beaucoup

Novis

**yuston** · 20 Août 2017

Salut,

C'est ce CSS qui correspond au rectangle.

figure.effect-oscar figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
}

novis · 20 Août 2017

Bonjour Yuston!

Merci beaucoup, J'ai enfin réussi à voir ce carré apparaître dans ma vignette! Merci Merci....

J'ai réussi à recadrer mon texte (item. caption p) afin qu'il apparaisse correctement dans le cadre car jusqu'alors il débordait.

Par contre j'ai un souci avec le titre (item. caption a et b) car il se retrouve à l'extérieur du cadre. J'ai modifié le padding mais rien n'y fait. Et si j'ajoute le padding sur item. caption le cadre déborde de ma vignette et plus rien n'est cadré.

Je vous envois mon css au cas où vous trouveriez mon erreur:

<script>

$(document).ready(function() {

	//move the image in pixel
	var move = -15;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;

	//On mouse over those thumbnail
	$('.item').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
		
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});

});

</script>
<style>
body 
	{<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}


.item {
	width:250px;
	height:250px;	
	border:2px solid #222;	
	margin:5px 5px 5px 0;


	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;

}

	


.item .caption {
	width:250px;
	height:250px;
	background:#000;
	color:#fff;
	font-weight:light;
        text-align:center;
        line-height:normal;

       

	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption:before {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border: 1px solid #fff;
        content: '';


}



.item .caption a {
	padding:25px; 2px; 
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:normal;
        text-align:center;
        line-height:normal;
        
}



	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}

.item .caption b {
	padding:25px; 2px; 
	text-decoration:none;
	color:#9400D3;
	font-size:20px;	
	font-weight:bold;
        text-align:center;
        line-height:normal;
        
       


	/* add spacing and make the whole row clickable*/
	padding:5px; 5px; 20px; 5px;
	display:INLINE-BLOCK;
}

.item .caption p {
	padding:25px; 5px; 25px; 5px;
	margin:2;
	font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:normal;
        position: relative;
        top: 40%;
         
}

.item img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

.clear {
	clear:both;	
}
</style>
>

Merci beaucoup pour votre aide! Là j'avance bien , c'est cool!

Novis

novis · 20 Août 2017

Re-Bonjour,

Je souhaite améliorer mon code en incrustant une transition comme dans l'effet "oscar" dont je parle plus haut.

J'ai donc modifié mon code css mais le carré apparaît toujours directement, sans transition.

Pouvez-vous m'indiquer quelle est mon erreur dans mon code?

Merci beaucoup

.item .caption:before {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border: 1px solid #fff;
        content: '';
        transition:0.5s;

}


.item .caption:before p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.item .caption:hover caption:before,
.item .caption:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

Merci beaucoup à la personne qui saura m'éclairer!

Novis

Connexion

insérer carré sur image en hover

Sujets conseillés

novis

Dan

novis

novis

yuston

novis

novis

Veuillez vous connecter pour commenter

Parcourir

Activité