18008 sujets

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

[Résolu] [Résolu] Changement des images au survol (pas dans un menu)

Bonjour,

Nouvel arrivant, une question.

Je voudrais que les images d’un article soient "doubles" je m’explique :
un état initial flou, et quand on survole elle devient nette

mon idée est de mettre mes deux images dans la partie html
dans une div ( auquel on attribuerait une classe ".imageDouble" (pour ne pas avoir chaque background en "id")
l’une en backgroud, l’autre en <img> à l’intérieur d‘un lien

la structure serait un truc du genre
<div class="imageDouble" style="background-image: url(../images/imageNette.jpg)>
<a ref="#"><ici imageFlou></a>
<div>

et là je m'embrouille grave dans le CSS

Quelqu’un peut-il m’aider ou me dire si je suis dans la bonne voie

une autre solution serait de mettre un "id" à chaque div
et de faire une tout coté css avec une transition entre deux images, c’est plus facile, plus joli
mais ça oblige à faire un style par image !

Merci d’avance
connecté
Modérateur
Bonjour,

Utilise plutôt une seule image (nette) et dans le css l'attribut filter: blur(...).

Exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Blur</title>
<style>
img
{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}
img:hover
{
	-webkit-filter:none;
	-moz-filter:none;
	-o-filter:none;
	-ms-filter:none;
	filter:none;
}
</style>      
</head>
<body>
<h1>Test</h1>
<a href="#"><img src="uneImageNette.png"></a>
</body>
</html>
Amicalement,
Modifié par parsimonhi (08 Feb 2016 - 18:16)
—>parsimonhi

Merci,

Je ne connaissait pas cet attribut, interessant !
(à ranger dans un neurone libre)

mais quand je disais "image floue", il s‘agit d'une image vraiment différente
qui as été traitée individuellement dans Photoshop avec des spécifications et effets différents sur chaque photo

il me faut vraiment deux images distinctes

Joueur de go aussi ?
connecté
Modérateur
Bonjour,

Bon, bah alors ça : (?)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Blur</title>
<style>
img
{
	opacity:0;
	background-image:url(imageFloue.png);
}
img:hover
{
	opacity:1;
}
</style>      
</head>
<body>
<h1>Test</h1>
<a href="#"><img src="imageNette.png"></a>
</body>
</html>


EDIT : trop vite répondu. Ceci devrait mieux marcher :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Blur</title>
<style>
a
{
	display:inline-block;
	background-image:url(imageFloue.png);
	background-repeat:no-repeat;
}
img
{
	opacity:0;
}
img:hover
{
	opacity:1;
}
</style>      
</head>
<body>
<h1>Test</h1>
<a href="#"><img src="imageNette.png"></a>
</body>
</html>
Oui, joueur de go !

Amicalement,
Modifié par parsimonhi (08 Feb 2016 - 18:49)
—>parsimonhi

Yes !

mais le " background-image:url(imageFloue.png); "
on peut pas le mettre dans le html pour ne pas avoir un style par image ?

et faire que le css ne gère que le changement avec une class
dans ce cas il faudrait metrre l’image dans la div et attribuer la classe à la div, non ?

désolé de compliquer
merci de ton aide

je suis meilleur au go qu‘au css, ceci dit, c’est ludique et stratégique aussi
connecté
Modérateur
Bonjour,

Bon, bon, bon ... ça ?
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Blur</title>
<style>
a
{
	display:inline-block;
	position:relative;
}
img
{
	position:absolute;
	top:0;
	left:0;
}
img.nette,
a:hover img.floue
{
	opacity:0;
}
a:hover img.nette
{
	opacity:1;
}
</style>      
</head>
<body>
<h1>Test</h1>
<a href="#"><img class="nette" src="image1.png"><img class="floue" src="image2.png"></a>
</body>
</html>
EDIT : c'est peut-être un poil mieux de remplacer (enfin bon, ça dépend de la manière dont tu styles ton <a> par ailleurs aussi) :
img
{
	position:absolute;
	top:0;
	left:0;
}
par
img.floue
{
	position:absolute;
	top:0;
	left:0;
}
Amicalement,
Modifié par parsimonhi (08 Feb 2016 - 20:31)
J'ai pas lu ton dernier message
j'avais la tête dans le css

ça as donné ça et ça marche !!

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
.doubleImage
{
background-repeat: no-repeat;
height: 250px;
width: 800px;
}
.doubleImage a img
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: .5s;
-moz-transition-property: opacity;
-moz-transition-duration: .5s;
transition-property: opacity;
transition-duration: .5s;
}
.doubleImage a img:hover
{
opacity:1;
}

</style>
</head>
<body>
<h1>Test 4</h1>
<div class="doubleImage" style="background-image: url(images/AE2flou.jpg)"><a href="#"><img src="images/AE2net.jpg" alt=""></a></div>
</body>
</html>

je définis background et image dans le achteumeuleu
et la class .doubleImage gère la bidouille (avec une transition, c’est du luxe !)

Merci de ton aide, je n’y serai pas arriver tout seul !

Amicalement

nouvelle question demain Smiley cligne
Lu avec retard le dernier message

astucieux l’idée de mettre les deux images avec l’opacité 0 et 1
je ne savais pas qu’on pouvait mettre deux images dans un même lien

Encore merci!

c’est la première fois que je questionne le forum
je ne faisais que le lire : vive le forum !
connecté
Modérateur
Bonsoir,

On peut tout faire, mais je pense que la solution où tu mets l'une des images en background avec un attribut style dans le html est la meilleure (d'habitude on déconseille d'utiliser l'attribut style dans le html, mais ici, ça peut avoir du sens compte tenu du fait que le background est différent pour chaque image).

Amicalement,
connecté
Modérateur
Bonjour,

A priori, on rajoute au début de son titre la mention [Résolu], ou bien on coche une case quelque part lors du dernier post qu'on fait.

Amicalement,
- > parsimonhi

Je te félicite pour l'énergie dépensée sur ce post. C'est réjouissant de lire ce type de progression sur un post. Je pensais trouver solution à ma problématique ici (ou un bout) mais finalement non.

Je recherche un lien sur le web pour m’aider à réaliser un image interactive pour une page web.
J’ai bien des éléments qui s’en rapprochent mais mes compétences ne me permettent pas de réaliser ce petit projet.

Il s'agit d'effectuer une interraction de transparence en dégradé sous le passage du curseur...

Une image « photoréaliste"
upload/62807-01.jpeg

Que l’on survole avec son curseur… Pour faire apparaître l’image placé au dessous :
upload/62807-00.jpeg

L’objectif étant de retrouver un visuel proche de cela :
upload/62807-02.jpeg

J’ai bien trouvé une piste à base de css et de javascript (java dont j’ignore quasi tout) :
- Celui ci : http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
- Ou celui là : https://davidwalsh.name/demo/mootools-flashlight.php

Je poursuis mes recherches sur l'internet...
Sujet clos
Aller à