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 rectangle 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

Bonjour, une piste :

Soit une div appelée "carre",

CSS :

.carre {
	position:absolute;
	top:100px;
	left:100px;
	width:200px;
	height:200px;
	border:1px solid red;
	transition:1s;
	
}

.carre:hover {
	width:250px;
	height:250px;
	top:75px;
	left:75px;

} 

Version rectangle :

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

.rectangle:hover {
	width:350px;
	height:250px;
	top:75px;
	left:75px;

} 

-
Edité par ChrisLebure 17 août 2017 à 21:46:33

Merci Chris pour votre réponse.

J'ai fait le test avec la version carré, or je pense ne pas insérer le code au bon endroit.

Je voudrais que le carré apparaisse dans l'image au moment du survol de la souris. J'ai donc inséré ce code au niveau de item. caption mais je crois que je dois me tromper car rien n'apparait. J'ai même modifier la taille du carré mais rien ne fait.

Peut-être saurez-vous m'aider, mon code css est:

<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="https://fonts.googleapis.com/css?family=Amatic+SC|Raleway" rel="stylesheet"> 
<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:#800fb0;
	font-size:20px;	
	font-weight:lighter;
        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:#800fb0;
	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:12px; 2px; 12px; 2px;
	margin:2;
	font-size:14px;
        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 d'avance

Novis

OK nous sommes d'accord, mes exemples fonctionnent parfaitement.

Je ne vais sûrement pas vous donner le code tout prêt à coller directement, ce n'est pas du tout l'objet du forum.
mais voici une autre piste avec le rectangle (ou du moins son contour) apparaissant au survol :

.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;
} 

Seule modification par rapport à la version précédente, on passe la bordure de transparent à red, du coup on fait apparaître le contour comme par magie au début de l'agrandissement ...

je vous laisse un peu bosser, ce sera formateur, c'est idiot de donner le code à copier/coller et anti-pédagogique

Merci Chris pour votre réponse.

Je suis tout à fait d'accord avec vous et croyez bien que je cherche également de mon côté. Cela fait 5jours que je cherche à insérer ce carré en vain...(cela dit, j'ai appris tout un tas d'autres choses super intéressantes! j'en suis ravi...)

Là je suis en train de faire des tests avec le code que vous venez de me donner en modifiant certaines données.

Juste, pour info, je suis débutant et j'aurai bien aimé comprendre à quoi correspond le top, left et les width et height.

Si je comprends bien les width et height correspondent à la taille du rectangle mais le top et left, c'est la position haut bas par rapport à quoi?

Merci de m'éclairer

Après autre question;

Peut-être que je n'insère pas ce code au bon endroit. Moi je le mets à ce niveau de mon code:

.item .caption {
	width:250px;
	height:250px;
	background:#000;
	color:#fff;
	font-weight:light;
        text-align:center;
        line-height:normal;
      .rectangle {
        position:absolute;
        top:100px;
        left:100px;
        width:10px;
        height:10px;
        border:1px solid transparent;
        transition:0.5s;
     
}     .rectangle:hover {
        border:1px solid red;
        width:20px;
        height:20px;
        top:100px;
        left:100px;
}

(Ne pas tenir compte des données, c'est juste pour savoir si la position est bonne)

novis

-
Edité par NovisCanvas 18 août 2017 à 14:12:28

Bonjour, J'ai trouvé une solution pour intégrer un carré dans ma vignette. J'ai réussi à recadrer mon texte pour qu'il apparaisse dans ma vignette. Néanmoins, j'ignore pourquoi mon titre (item caption a et b) se retrouve à l'extérieur de ce carré...

Pouvez vous m'éclairer?

Merci d'avance

Mon code css est:

<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 d'avance, c'est cool, j'avance bien mais là je bloque et je ne vois pas pourquoi mon titre est à l'extérieur du cadre. J'ai également testé d'ajouter un padding au item.caption et là le titre est à l'intéreiur mais mon carré n'est plus totalement dans ma vignette.

Si vous avez une idée...

Novis

Bonjour,

Comme vous pouvez le constater sur mon script dans le message précédant j'ai réussi à intégrer le carré dans ma vignette seulement, ce carré apparaît directement, sans transition et moi j'aimerais qu'il apparaisse de manière plus fluide comme dans l'effet oscar de cette page mais je ne sais quel code ajouter. http://epicadesign.fr/css3-des-effets-avances-de-survol-dimage/

J'ai fait plusieurs tests et rien est concluant.

Par contre, je n'ai toujours pas réussi à déplacer mon titre à l'intérieur du carré. Je ne comprends pas.  Et là pareil, j'ai fait tout un tas de tests en modifiant les codes mais cela ne fonctionne pas... Il y a des décalages hallucinants!!

Merci pour votre aide

Novis

Bonjour ,

Alors voilà, j'ai modifié le code en m'inspirant de l'effet oscar de cette page http://epicadesign.fr/css3-des-effets-avances-de-survol-dimage/.

Ainsi j'espérais parvenir à créer un cadre qui apparaîtrait avec transition en hover. Seulement, le cadre n'apparaît pas. J'ai des difficultés à croiser deux pages car mon effet hover vient d'un autre endroit...

Quelqu'un pourrait-il m'aider et m'expliquer ce qui ne va pas dans mon code? Merci d'avance...

Mon code html:

<div class="item"> <figure class="effect-oscar"><img alt="Peintures" src="http://mon adresse.com/images/n/nem/mon image.jpg" style="width: 250px; height: 250px;" title="" />
<div class="caption"><a href="">PEINTURES<span><b>contemporaines</b></span> </a><a class=".item .caption:before01" href="http://mon adresse.com/peinture.php">Cliquez ici</a>
<p>Peintures Contemporaine</p>
</div> </figure>
</div>

code css:

.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 effect-oscar:hover h2 {
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

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

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

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




.item .caption a {
	padding:25px; 10px; 
	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; 10px; 
	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; 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>
>

Après j'me suis dit, peut-être que je n'utilise pas la bonne partie du code pour le carré dans l'effet oscar...

le code est:

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:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-oscar figcaption{padding:3em;background-color:rgba(58,52,42,0.7);-webkit-transition:background-color .35s;transition:background-color .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 .35s;transition:transform .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 .35s,-webkit-transform .35s;transition:opacity .35s,transform .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:.4}

Merci de m'éclairer

Novis