11496 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Recherche plugin effet over de photo

Bonjour,

Je suis présentement à la recherche d'un plugin jquery css qui place un texte sur une photo par programmation et lorsque la souris passe dessus qu'il y ai un effet de fondu transparent noir.

Un peu comme ce site http://www.viesportive.com/

Ce n'est pas obligé d'être identique, mais semblable.

Les seules plugins que je trouvent, le texte apparaît au survol de la souris, mais moi je veux que le texte reste là avant le survol et qui reste là malgré l'effet.

P.s. Fonctionnel sur IE7 de préférence, donc css3 à éviter.


Je vous remercie beaucoup! Smiley smile
Modifié par sydgie (05 Nov 2013 - 20:41)
Oh wow! Vraiment pile le genre que je cherche, je vais regarder cela plus en profondeur sous peu.

Un gros merci! Smiley smile
Bonjour,

Je viens de l'essayer, mais le tout ne fonctionne pas. Pourtant j'ai copier/coller le code pour tester, mais rien ne fonctionne. Je vois les carrés mauves avec le titre et la description décalé vers le bas et aucun effet est fonctionnel. J'ai de la difficulté à voir ce que je ne fais pas de correcte.

Pensez-vous que cela peut être le format de la balise Doctype ou le format de la balise html par défaut que mon logiciel met qui pourrait causer ce genre de problème?

Merci beaucoup de votre temps et votre patience.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<script>
$(document).ready( function() {
    $('.content').each( function() {
        var $this = $(this);
        var img = $this.attr('data-img');
        $this.css({'background':'url('+img+') no-repeat center center','background-size':'cover'}); 
    });
    
    $('.text').each( function() {
        var $this = $(this);
        $this.css({'margin-top':'-'+ ($this.height() / 2) + 'px'}); 
    });
    
    $('.content').hover(
        function(){
            $(this).find('.overlay').animate({'opacity':0.7}, 200)
        },
        function(){
        $(this).find('.overlay').animate({'opacity':0}, 200)
        });
    
    
});

</script>

<style>

body {
    font-family: 'Damion', cursive;
}

.content {
position:relative;
width:300px;
height:300px;
float:left;
margin:20px;
background:#853256;
}

.text {
position:absolute;
width:250px;
color:#FFFFFF;
top:50%;
left:50%;
margin-left:-125px;
text-shadow: 2px 2px 2px black;
}

.overlay {
position:absolute;
width:100%;
height:100%;
background:#000000;
opacity:0;
}

</style>

</head>

<body>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/1.jpg">
<div class="overlay"></div>
    <div class="text"><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré</div>    
</div>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/2.jpg">
<div class="overlay"></div>
    <div class="text"><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré</div>    
</div>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/4.jpg">
<div class="overlay"></div>
    <div class="text"><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré</div>    
</div>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/5.jpg">
<div class="overlay"></div>
    <div class="text"><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré</div>    
</div>
</body>
</html>
la réponses est simple il faut que tu charges la librairie jquery dans ton head pour que le script fonctionne


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style>
.content {
position:relative;
width:300px;
height:300px;
float:left;
margin:20px;
background:#853256;
}

.text {
position:absolute;
width:250px;
color:#FFFFFF;
top:50%;
left:50%;
margin-left:-125px;
text-shadow: 2px 2px 2px black;
}

.overlay {
position:absolute;
width:100%;
height:100%;
background:#000000;
opacity:0;
}

</style>

</head>

<body>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/1.jpg">
<div class="overlay"></div>
    <div class="text"><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré</div>    
</div>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/2.jpg">
<div class="overlay"></div>
    <div class="text"><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré</div>    
</div>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/4.jpg">
<div class="overlay"></div>
    <div class="text"><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré</div>    
</div>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/5.jpg">
<div class="overlay"></div>
    <div class="text"><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré</div>    
</div>

<script>
$(document).ready( function() {
    $('.content').each( function() {
        var $this = $(this);
        var img = $this.attr('data-img');
        $this.css({'background':'url('+img+') no-repeat center center','background-size':'cover'}); 
    });
    
    $('.text').each( function() {
        var $this = $(this);
        $this.css({'margin-top':'-'+ ($this.height() / 2) + 'px'}); 
    });
    
    $('.content').hover(
        function(){
            $(this).find('.overlay').animate({'opacity':0.7}, 200)
        },
        function(){
        $(this).find('.overlay').animate({'opacity':0}, 200)
        });
    
    
});

</script>
</body>
</html>

Modifié par tazzkiller (14 Nov 2013 - 23:15)
Oui... Ou beaucoup plus simple en se basant sur un background en rgba (il faudra trouver une alternative pour IE8) mais apparemment même le site que tu proposes s'en fiche un peu.
Le même exemple.
Je savais bien qu'il manquait un truc, haha ^^

Là ça fonctionne et pour IE8 et moins, je regarde le résultat à l'instant et: bon c'est pas parfait, mais c'est quand même acceptable. Le texte est là et l'effet fondu y est aussi. Y'aurait peut-être à faire une partie CSS juste pour IE8 et - et j'aurais quelque chose de bien.

Je vous remercie beaucoup, je vais m'amuser avec ça ^^
Modifié par sydgie (15 Nov 2013 - 16:25)
Sujet clos
Aller à