Lien image en survol mobile tablette responsive
Fermé
flo_691
Messages postés
112
Date d'inscription
lundi 28 mai 2012
Statut
Membre
Dernière intervention
21 septembre 2020
-
Modifié le 16 oct. 2018 à 22:10
flo_691 Messages postés 112 Date d'inscription lundi 28 mai 2012 Statut Membre Dernière intervention 21 septembre 2020 - 17 oct. 2018 à 16:31
flo_691 Messages postés 112 Date d'inscription lundi 28 mai 2012 Statut Membre Dernière intervention 21 septembre 2020 - 17 oct. 2018 à 16:31
A voir également:
- Lien image en survol mobile tablette responsive
- Lien url - Guide
- Verifier un lien - Guide
- Créer un lien pour partager des photos - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
3 réponses
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
17 oct. 2018 à 09:20
17 oct. 2018 à 09:20
Bonjour,
Sans voir ton code......
NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Sans voir ton code......
NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
flo_691
Messages postés
112
Date d'inscription
lundi 28 mai 2012
Statut
Membre
Dernière intervention
21 septembre 2020
5
Modifié le 17 oct. 2018 à 09:53
Modifié le 17 oct. 2018 à 09:53
Oups... pardon
voici pour la partie html :
Et le CSS
voici pour la partie html :
<div class="portfolio_item portfolio_item2"> <a href="projet_quicksilver_pro.html"><img src="assets/images/Portfolio/quicksilver_pro_france.jpg" alt="" /></a> <div class="portfolio_hover text-center"> <h6 class="text-uppercase text-white">Identité événementielle</h6> <p class=" text-white">Quicksliver Pro France</p> <div class="portfolio_hover_icon"> <a href="projet_quicksilver_pro.html"><i class="fa fa-expand"></i></a> </div> </div> </div>
Et le CSS
.main_portfolio{ width:100%; overflow: hidden; } .portfolio_item{ position: relative; overflow: hidden; } .portfolio_item:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .portfolio_item img{ width:100%; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; transition: all 0.6s; } .portfolio_hover{ position: absolute; left:0%; right:0%; top:0%; width:100%; height: 100%; background-color:rgba(0, 0, 0, 0.30); padding-top: 12%; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; } .portfolio_item:hover .portfolio_hover{ opacity: 1; } .portfolio_item2 .portfolio_hover{ padding-top: 25%; } .portfolio_item3 .portfolio_hover{ padding-top: 65%; }
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
17 oct. 2018 à 10:08
17 oct. 2018 à 10:08
Là comme ça je ne vois rien de particulier ... ne manquerait-il pas également le Javascript ?
flo_691
Messages postés
112
Date d'inscription
lundi 28 mai 2012
Statut
Membre
Dernière intervention
21 septembre 2020
5
Modifié le 17 oct. 2018 à 16:31
Modifié le 17 oct. 2018 à 16:31
Je ne sais pas vu que j'utilise une template html gratuite et libre de droit...
Je n'ai que quelques notions en html et css. Où pourrais-je trouver le bout de code java correspondant à cet effet ?
Pour info, le site est en ligne : https://www.studioluuug.com/
Il s'agit de l'endroit où se trouvent les projets...
Merci beaucoup pour votre aide
Je n'ai que quelques notions en html et css. Où pourrais-je trouver le bout de code java correspondant à cet effet ?
Pour info, le site est en ligne : https://www.studioluuug.com/
Il s'agit de l'endroit où se trouvent les projets...
Merci beaucoup pour votre aide