28173 sujets

CSS et mise en forme, CSS3

Effet loupe en pure css3

Bonjour à toutes et tous,

alors voilà, je débute en css3 et j'aimerai avoir un script déjà existant ou une orientation en pure css3 pour créer un effet loupe au survole de la souris sur une image mais qui apparaîtrait dans une div ou un span à côté. Je ne sais pas si cela est seulement faisable mais ayant trouvé des codes pour faire des lightbox en pure css3, je me disais que cela devait être aussi faisable.

J'attends donc vos idées ou vos liens car Google est pauvre dans ce domaine.

Merci d'avance. Smiley cligne

ps: Je souhaiterai que le zoom ne s'affiche pas en entier... c'est à dire qu'en bougeant la souris sur l'image originale, ça fasse apparaitre la partie ou se situe la souris dans la div et le reste est cachée... un peu comme sur ce modèle :

http://addons.prestashop.com/demo/FO3309.html

Je précise que je ne veux pas de jQuery ou tout script java ou JS ^^'

pourquoi faire simple quand on peut faire compliquer Smiley murf
Modifié par stefde3 (29 Jun 2013 - 12:30)
wahou !!!

c'est nickel merci beaucoup ^^

Par contre l'image est dans le css en background... je fais comment si l'image change ?
car c'est pour une boutique en ligne...
Je sais qu'on peut mettre du php dans le css comme dans ce tuto : Exemple mais est-ce bien recommandé ?

bon j'ai trouvé donc oublié ma dernière question ^^
Voici ce que j'ai trouvé :
Lien
Modifié par stefde3 (30 Jun 2013 - 10:12)
Bon, voici ce que j'ai qui ne fonctionne pas :

donc mon code css en PHP :

<?php header('content-type: text/css');?>
<?php header('HTTP/1.0 304 Not Modified');?>
<?php header('Cache-Control: max-age=3600, must-revalidate');?>
<style>
	.frame {width:180px; height:240px; background:url(statue-small.jpg); font-size:1px; margin-left:10px;}
.frame a {display:block; float:left; width:5px; height:5px; cursor:crosshair; position:relative; z-index:10;}

.frame a.r1,
.frame a.r26 {height:30px;}

.frame a.c1,
.frame a.c14 {width:30px;}

.frame a:hover {direction:ltr; position:relative; z-index:1}
.frame a:hover b {display:block; position:absolute; width:118px; height:118px; top:-60px; left:-60px; border:1px solid #000; background:#fff;
filter: alpha(opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
opacity:0.3;
}
.frame a.r1:hover b {top:0;}
.frame a.c1:hover b {left:0;}

.frame a:hover i em {display:block; width:540px; height:720px; background:url(statue.jpg); position:absolute;}

.frame a:hover i {display:block; width:360px; height:360px; position:absolute; overflow:hidden; top:0;}
.frame a.c1:hover i {left:200px;}
.frame a.c2:hover i {left:140px;}
.frame a.c3:hover i {left:135px;}
.frame a.c4:hover i {left:130px;}
.frame a.c5:hover i {left:125px;}
.frame a.c6:hover i {left:120px;}
.frame a.c7:hover i {left:115px;}
.frame a.c8:hover i {left:110px;}
.frame a.c9:hover i {left:105px;}
.frame a.c10:hover i {left:100px;}
.frame a.c11:hover i {left:95px;}
.frame a.c12:hover i {left:90px;}
.frame a.c13:hover i {left:85px;}
.frame a.c14:hover i {left:80px;}

.frame a.r1:hover i {top:0;}
.frame a.r2:hover i {top:-60px;}
.frame a.r3:hover i {top:-65px;}
.frame a.r4:hover i {top:-70px;}
.frame a.r5:hover i {top:-75px;}
.frame a.r6:hover i {top:-80px;}
.frame a.r7:hover i {top:-85px;}
.frame a.r8:hover i {top:-90px;}
.frame a.r9:hover i {top:-95px;}
.frame a.r10:hover i {top:-100px;}
.frame a.r11:hover i {top:-105px;}
.frame a.r12:hover i {top:-110px;}
.frame a.r13:hover i {top:-115px;}
.frame a.r14:hover i {top:-120px;}
.frame a.r15:hover i {top:-125px;}
.frame a.r16:hover i {top:-130px;}
.frame a.r17:hover i {top:-135px;}
.frame a.r18:hover i {top:-140px;}
.frame a.r19:hover i {top:-145px;}
.frame a.r20:hover i {top:-150px;}
.frame a.r21:hover i {top:-155px;}
.frame a.r22:hover i {top:-160px;}
.frame a.r23:hover i {top:-165px;}
.frame a.r24:hover i {top:-170px;}
.frame a.r25:hover i {top:-175px;}
.frame a.r26:hover i {top:-180px;}

.frame a.c1:hover em {left:0px;}
.frame a.c2:hover em {left:0px;}
.frame a.c3:hover em {left:-15px;}
.frame a.c4:hover em {left:-30px;}
.frame a.c5:hover em {left:-45px;}
.frame a.c6:hover em {left:-60px;}
.frame a.c7:hover em {left:-75px;}
.frame a.c8:hover em {left:-90px;}
.frame a.c9:hover em {left:-105px;}
.frame a.c10:hover em {left:-120px;}
.frame a.c11:hover em {left:-135px;}
.frame a.c12:hover em {left:-150px;}
.frame a.c13:hover em {left:-165px;}
.frame a.c14:hover em {left:-190px;}

.frame a.r1:hover em {top:0;}
.frame a.r2:hover em {top:0;}
.frame a.r3:hover em {top:-15px;}
.frame a.r4:hover em {top:-30px;}
.frame a.r5:hover em {top:-45px;}
.frame a.r6:hover em {top:-60px;}
.frame a.r7:hover em {top:-75px;}
.frame a.r8:hover em {top:-90px;}
.frame a.r9:hover em {top:-105px;}
.frame a.r10:hover em {top:-120px;}
.frame a.r11:hover em {top:-135px;}
.frame a.r12:hover em {top:-150px;}
.frame a.r13:hover em {top:-165px;}
.frame a.r14:hover em {top:-190px;}
.frame a.r15:hover em {top:-205px;}
.frame a.r16:hover em {top:-220px;}
.frame a.r17:hover em {top:-235px;}
.frame a.r18:hover em {top:-250px;}
.frame a.r19:hover em {top:-265px;}
.frame a.r20:hover em {top:-290px;}
.frame a.r21:hover em {top:-305px;}
.frame a.r22:hover em {top:-320px;}
.frame a.r23:hover em {top:-335px;}
.frame a.r24:hover em {top:-350px;}
.frame a.r25:hover em {top:-365px;}
.frame a.r26:hover em {top:-380px;}
</style>


mon fichier index avec le lien :


<?php session_start(); 
$_SESSION['login'] = 1;
$nom = 'LEGRAND';
$prenom = 'Stéphane';
$Article = '2 article(s)';
if ($Article != ''){
	$nbArticle = $Article;
}
else $nbArticle = 'vide';

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gaëlle Créations ::: Créations en pâte FIMO, Scultures et Modélisation</title>
<link rel="stylesheet" type="text/css" href="./css/demo.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
<link rel="stylesheet" type="text/css" href="./css/styles_zoomimg.php" />
</head>

<body>
<div id="header">
	<div id="wrapper">
    	<div id="cadre_head">
    		<div id="logo">&nbsp;</div>
            <div class="login">
        		<?php if (!empty($_SESSION['login'])){ 
					echo 'Bienvenue<br />'.$nom.'&nbsp;'.$prenom.'&nbsp;&nbsp;<a href="index.php?module=logout"><img src="./img/bt_deco.png" width="25" height="25" alt="bt_deco.png" title="Déconnexion"></a><br /><a href="index.php?module=profil">Voir mon profil</a>';
					}
					else
					{
				?>
        		
            	<form action="#" method="post" enctype="multipart/form-data" name="login">
            		<div id="cadreLogin1">
                    	<div id="loginName1">Votre email :</div>
                        <div id="loginInput1"><input type="email" name="email" id="email" class="input" /></div>
                    </div><br />
                	<div id="cadreLogin2">
                    	<div id="loginName2">Mot de passe :</div>
                        <div id="loginInput2"><input type="password" name="pass" id="pass" class="input" /></div>
                    </div>   
                    <br />
                	<input type="submit" name="submit" id="submit" class="connexion" Value="Connexion" /><br />
                	<a href="index.php?module=forgot">Mot de passe oublié ?</a>
            	</form>
            	<?php } ?>
      		</div>        
        </div>
    </div>
</div>
<div id="wrapper1">
	<div id="cadreTop">
    	<div id="arrow">
    		<div class="arrow_box2">
    			<a href="../">&lt;&lt;&lt; Retour au site</a>
    		</div>
        </div>
        <div id="right"><?php if (!empty($_SESSION['login'])){ 
			?><img src="./img/panier.png" width="25" height="25" title="Votre panier" alt ="panier.png">Votre panier : <?php echo $nbArticle; ?><br /><?php if ($nbArticle = 'vide'){echo '';} else { ?><div id="panier"><a href="index.php?module=panier">Voir mon panier</a></div>';
		<?php }}
		else echo '<div id="right"><div id="inscription"><a href="index.php?module=inscription">Inscription</a></div></div>';
		?>
        </div>
       </div>
</div>
</div>
<br /><br />
<div id="wrapper2">
	<div id="contener">
    	<div class="arrow_box">
        	<h1><a href="#">/!\ BOUTIQUE EN CONSTRUCTION /!\</a></h1>
        </div>
        <div id="contenerB" class="center">
    	<div class="MgTop">LA BOUTIQUE EST ACTUELLEMENT EN TRAIN D'ÊTRE CR&Eacute;&Eacute;E.<br /><br />
        MERCI DE VOTRE COMPR&Eacute;HENSION.<br /><br />
        EN ATTENDANT, VISITER NOTRE PAGE "<strong>MES CR&Eacute;ATIONS</strong>".</div>
        </div>
	</div>
</div>
<br /><br />
<div id="footer">
	<div id="wrapper3">
		Plan du site | Contact | CGU<br />
        Conception du site : <a href="http://www.weblobsdesigner.fr">Weblobsdesigner</a>&copy; 2008-2013.
	</div>
</div>
</body>
</html>


et enfin le fichier .hataccess que j'ai mis dans mon dossier "module" :


RewriteEngine on
RewriteRule (.*).css /$1.php
AddType x-mapp-php5 .css


quand je clique pour voir le fichier source de ma page, le lien :
<link rel="stylesheet" type="text/css" href="./css/styles_zoomimg.php" />


n'apparaît pas.

Une solution ?
la balise style n'a rien a faire dans ton fichier de style.

Est tu sur de l'arborescence ou du lieu ou se trouve ton fichier PhP?
Si tu envoi le mime type dans l’entête, en principe tu peut garder l'extension .php

++
Bonsoir,

oui en effet merci de me l'avoir rappeler ...

Heureusement, j'ai vérifier le lien et j'étais sur une autre adresse... Smiley ohwell

J'ai vraiment parfois la tête ailleurs moi ^^

Merci pour ton poste gc-nomade
Modifié par stefde3 (01 Jul 2013 - 22:08)
Sujet clos
Aller à