Customize gallery and setting opacity to only one thumbnail with hover and css

HTML-CSS
1

hello everybody i try to customize a photo gallery
there is a top content which is a big display of an image chosen lower through thumbnails whose opacity is set to 0.5
when you click on a thumbnail , the big picture is displaid but also the chosen thumbnail opacity is set to 1

Sans-titre-1
Sans-titre-11000×495 142 KB

html is here

<!DOCTYPE html>
<html lang="fr"> 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
        <title>CSS Grids Gallery</title>
    </head><body><div class="fond_ecran"><div class="milieu"><h1>Jérémie Parmentier</h1><h2>photographie</h2>
	<div class="gallery">
  <input type="radio" checked="checked" name="select" id="img-tab-1">
  <label for="img-tab-1" style="background-image: url(https://images.unsplash.com/photo-1558980664-769d59546b3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=800&q=60);"></label></label>
  <img src="https://images.unsplash.com/photo-1558981000-f294a6ed32b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjc5NjV9&auto=format&fit=crop&w=2550&q=80" border="0">

  <input type="radio" name="select" id="img-tab-2">
  <label for="img-tab-2" style="background-image: url(https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60);"></label>
  <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" border="0">

  <input type="radio" name="select" id="img-tab-3">
  <label for="img-tab-3" style="background-image: url(https://images.unsplash.com/photo-1558981285-501cd9af9426?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60);"></label>
  <img src="https://images.unsplash.com/photo-1558981285-501cd9af9426?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"border="0">
  
  <input type="radio" name="select" id="img-tab-4">
  <label for="img-tab-4" style="background-image: url(https://images.unsplash.com/photo-1558981001-1995369a39cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60);"></label>
  <img src="https://images.unsplash.com/photo-1558981001-1995369a39cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"border="0">
  
  <input type="radio" name="select" id="img-tab-5">
  <label for="img-tab-5" style="background-image: url(https://images.unsplash.com/photo-1558980394-dbb977039a2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60);"></label>
  <img src="https://images.unsplash.com/photo-1558980394-dbb977039a2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"border="0">
  
  <input type="radio" name="select" id="img-tab-6">
  <label for="img-tab-6" style="background-image: url(https://images.unsplash.com/photo-1558980664-769d59546b3d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60);"></label>
  <img src="https://images.unsplash.com/photo-1558981000-f294a6ed32b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjc5NjV9&auto=format&fit=crop&w=800&q=60"border="0">

  <input type="radio" name="select" id="img-tab-7">
  <label for="img-tab-7" style="background-image: url(https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60);"></label>
  <img src="https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=601.2.1&auto=format&fit=crop&w=800&q=60"border="0">
  
  <input type="radio" name="select" id="img-tab-8">
  <label for="img-tab-8" style="background-image: url(https://images.unsplash.com/photo-1558980664-2506fca6bfc2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60);"></label>
  <img src="https://images.unsplash.com/photo-1558980664-2506fca6bfc2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"border="0">
</div>
</div>
</div>
    </body>
</html>

css is here

body{
	background-color: #808080;
}

.fond_ecran 
{  height: 600px;
  width: 800px;
  margin: auto;
  border: 0px solid #4287f5;
    background-image: url("../img/fd_ecran2.jpg");
}
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.milieu 
{  height: 600px;
padding-top:100px;
  width: 600px;
  margin: auto;
  border: 0px solid #4287f5;
    text-align: center;
}
h1{Font-family: Dejavu Sans, Arial, Verdana, sans-serif;}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  align-content: start;
  max-width: 700px;
  margin: 0 auto;
  transition: all 150ms linear;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  width: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}

thanks for your help :smiley:
please notice little image and big display should be the same of course

2

Hi there!

Add live link to your website source code, that someone can play around with it for your desire solution.

3

  1. Set opacity: 0.5 in the .gallery label selector

  2. Create a .gallery label:hover selector and set opacity: 1 inside it.

  3. Create a .gallery input[name="select"]:checked + label selector and set opacity: 1 inside it.

Example CSS 
body {
  background-color: #808080;
}

.fond_ecran {
  height: 600px;
  width: 800px;
  margin: auto;
  border: 0px solid #4287f5;
  background-image: url("../img/fd_ecran2.jpg");
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.milieu {
  height: 600px;
  padding-top: 100px;
  width: 600px;
  margin: auto;
  border: 0px solid #4287f5;
  text-align: center;
}

h1 {
  font-family: Dejavu Sans, Arial, Verdana, sans-serif;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  align-content: start;
  max-width: 700px;
  margin: 0 auto;
  transition: all 150ms linear;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.gallery label:hover {
  opacity: 1;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  width: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label {
  opacity: 1;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
4

fantastic ! thank you very much!
regards