Cacher une partie de l'image

Cacher une partie de l'image - HTML/CSS - Programmation

Marsh Posté le 03-10-2016 à 18:05:59    

Bonjour
 
je suis actuellement de créer un site portfolio et j'ai un petit problème. Je souhaite que sur la page, il y ai des lignes de 4 images qui prennent 100% de l'écran (25%par image donc), ensuite je souhaiterai que lorsque la fenêtre est redimensionnée, l'image s'adapte au cadre, j'entends par là que le centre de l'image reste le même, que l'image ne bouge pas, juste le cadre de l'image donc en gros les côtés gauches et droits disparaissent ; un peu comme un background-size: cover en fait.
Le problème est que je ne peux pas mettre les images en bg car ce sont les principaux éléments de ma page.
Avec mon code actuel, l'image est redimensionné donc le rapport hauteur/largeur n'est pas respecté.
 
Voici mon code html :
 

Code :
  1. <div id="portfolio-contenu">
  2.            <div class="projet print">
  3.                <a href="page.html" class="lien-projet">
  4.                    <img src="img/image.jpg" alt="" class="">
  5.                </a>
  6.                <div class="nom-projet">nom <p>sous titre</p></div>
  7.            </div>
  8. <div class="projet print">
  9.                <a href="page.html" class="lien-projet">
  10.                    <img src="img/image.jpg" alt="" class="">
  11.                </a>
  12.                <div class="nom-projet">nom <p>sous titre</p></div>
  13.            </div>
  14. <div class="projet print">
  15.                <a href="page.html" class="lien-projet">
  16.                    <img src="img/image.jpg" alt="" class="">
  17.                </a>
  18.                <div class="nom-projet">nom <p>sous titre</p></div>
  19.            </div>
  20. <div class="projet print">
  21.                <a href="page.html" class="lien-projet">
  22.                    <img src="img/image.jpg" alt="" class="">
  23.                </a>
  24.                <div class="nom-projet">nom <p>sous titre</p></div>
  25.            </div>
  26. <div class="projet print">
  27.                <a href="page.html" class="lien-projet">
  28.                    <img src="img/image.jpg" alt="" class="">
  29.                </a>
  30.                <div class="nom-projet">nom <p>sous titre</p></div>
  31.            </div>
  32.            
  34.            </div>


 
et le css :
 

Code :
  1. #portfolio-contenu{
  2.     margin-top: 25px;
  3.     text-align: center;
  4.     display: -webkit-box;
  5.     display: -moz-box;
  6.     display: -ms-flexbox;
  7.     display: -webkit-flex;
  8.     display: flex;
  9.     -webkit-flex-wrap: wrap;
  10.     -webkit-justify-content: center;
  11.     -webkit-align-items: stretch;
  12.     -moz-flex-wrap: wrap;
  13.     -moz-justify-content: center;
  14.     -moz-align-items: stretch;
  15.     -ms-flex-wrap: wrap;
  16.     -ms-justify-content: center;
  17.     -ms-align-items: stretch;
  18.     flex-wrap: wrap;
  19.     justify-content: center;
  20.     align-items: stretch;
  21.     text-align: center;
  22. }
  24. .projet{
  25.     overflow: hidden;
  26.     position: relative;
  27.     height: 10%;
  28.     max-height: 300px;
  29.     width: 25%;
  30.     display: inline-block;}
  31. .projet img{
  32.     width: 100%;
  33.     height: 300px;
  34.     -webkit-transition: -webkit-transform 300ms;
  35.     transition: transform 300ms;
  36.     -webkit-filter: blur(0.2px) grayscale(100%) ;
  37.   filter: blur(0.2px) grayscale(100%);
  38.     background-position: center;
  39.     background-size: cover;
  40. }
  42. .projet:hover img {
  43.     -webkit-transition: 300ms;
  44.     transition: 300ms;
  45.     -webkit-transform: scale(1.05);
  46.     -moz-transform: scale(1.05);
  47.         -webkit-filter: blur(0px) grayscale(0%) ;
  48.       filter: blur(0px) grayscale(0%);
  49. }
  51. .projet:hover .nom-projet{
  52.     transform: translateY(0);
  53.     -webkit-transform: translateY(0);
  54.     transition: linear 350ms;
  55.     -webkit-transition: linear 350ms;
  56. }
  58. .nom-projet {
  59.     transition: linear 350ms;
  60.     -webkit-transition: linear 350ms;
  61.     -moz-transition: linear 350ms;
  62.     position: absolute;
  63.     left: 0;
  64.     right: 0;
  65.     bottom:0;
  66.     transform: translateY(100%);
  67.     -moz-transform: translateY(100%);
  68.     -webkit-transform: translateY(100%);
  69.     padding: 15px 10px;
  70.     color: #fff;
  71.     background: #726222;
  72.     font-size: 20px;
  73.     font-family: 'caviar_dreamsbold';
  74.     text-align: center;
  75. }
  77. .nom-projet p{
  78.     color: #fff;
  79.     font-size: 15px;
  80.     font-family: 'caviar_dreamsbold';
  81.     text-align: center;
  82. }


 
Savez vous si c'est possible de faire ce que je veux ? Si oui, savez vous comment ?
 
Merci par avance

Reply

Marsh Posté le 03-10-2016 à 18:05:59   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed