28172 sujets

CSS et mise en forme, CSS3

Masque : choisir l'endroit de l'image

Bonjour,

Je souhaite réalisé un masque sur une galerie.
J'ai mis un Overflow pour caché la parti non désiré, sauf que j'aimerais que se soit le centre de l'image qui apparaisse et pas l'angles en haut a gauche pas defaut.

Si vous saviez comment faire faire ?


#galerie{
  width: 80%;
  overflow: hidden;
 }



ul{
    list-style-type: none ;
    margin: 0;
    padding: 0;
    width : 100px;
    height: 120px;
}

li{
    display: inline-block;;
    width : 16%;
}
Voici la tete de mon HTML (j'ai mis que 1 seul element de la liste pour simplifier l'affichage) : 

<div id"visualiseur">
			<ul id="galerie" >
				<li><img src="images/vue_panoramique1.jpg" alt="Photo 1" /></li>
			</ul>
</div>


Ca marche pas en tout cas ta proposition
Hello,

Sans voir une page en ligne, ni savoir pourquoi tu souhaites masquer un partie de l'image difficile de tenter de t'apporter une aide performante Smiley cligne
Intuitivement, j'imagine qu'il y a une action au survol ou au click sur ces images ?

Il y a des choses intéressantes à faire avec la propriété clip, si cela peut faire avancer le truc Smiley cligne
scorpio75 a écrit :
Voici la tete de mon HTML (j'ai mis que 1 seul element de la liste pour simplifier l'affichage) : 

&lt;div id&quot;visualiseur&quot;&gt;
			&lt;ul id=&quot;galerie&quot; &gt;
				&lt;li&gt;&lt;img src=&quot;images/vue_panoramique1.jpg&quot; alt=&quot;Photo 1&quot; /&gt;&lt;/li&gt;
			&lt;/ul&gt;
&lt;/div&gt;


Ca marche pas en tout cas ta proposition


Peut-on voir ce que tu en as fait ?
C'est pour un devoir d'école :

upload/54558-Capturede7.png

Actuellement mon code ressemble exactement a ca : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<title>Webcams à Oléron</title>
</head>

<body>
	<div id="wrap">

		<div id="header">
		</div>
		
	<div id="conteneur">

		<div id"visualiseur">
			<ul id="galerie" >
				<li><img src="http://www.ile-oleron-marennes.com/sites/default/files/visionneuse/port_salines_oleron_pano_0.jpg" alt="Webcam 1" /></li>
				<li><img src="http://www.ile-oleron-marennes.com/sites/default/files/visionneuse/cabanes_chateau_oleron_pano.jpg" alt="Webcam 2" /></li>
				<li><img src="http://www.ile-oleron-marennes.com/sites/default/files/visionneuse/cotiniere_oleron_pano.jpg" alt="Webcam 3" /></li>
				<li><img src="http://www.ile-oleron-marennes.com/sites/default/files/visionneuse/brouage-oleron-marennes_0.jpg" alt="Webcam 4" /></li>
				<li><img src="http://www.ile-oleron-marennes.com/sites/default/files/visionneuse/plage-saumonards-oleron-marennes_0.jpg" alt="Webcam 5" /></li>
				<li><img src="http://www.ile-oleron-marennes.com/sites/default/files/visionneuse/pointe-chassiron-oleron-marennes_0.jpg" alt="Webcam 6" /></li>
			</ul>
		</div> <!-- Div visualiseur --> 

		 <dl id="photo">
    <p>Webcam de l'ile d'Oléron</p>
    <dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
  </dl>

</div> <!-- Div CONTENEUR --> 

		
		<div id="footer">
		</div>
	
	</div>
</body>
</html>


et mon CSS : 
body{
  margin : 0;
  padding : 0;
}

#conteneur{
    width: 80%;
    margin: 0 auto 0 auto;
}

#galerie{
  width: 100%;
  overflow: hidden;
 }



ul{
    list-style-type: none ;
    margin: 0;
    padding: 0;
    height: 120px;
}

li{
    display: inline-block;;
    width : 16%;
}


Mon objectif final est d'obtenir une galerie en Javascript Html Css ou quand l'on clique sur la petite image en haut (qui est une parti de l'image) on l'obtient en dessous en plus grand.

Je ferais tout l'aspect visuel et graphique apres, je veux deja que cette partie la fonctionnel marche
Oui justement, c'est ma base de travail. Sauf qu'il faut que je l'adapte et pour ca, j'essaye peniblement de faire mon truc avec les masques sur les images
Sujet clos
Aller à