JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cover_container">

    <div class="cover_img">
        <div class="img_200px200px">
         
           <a href="#">
             <img src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="auto" padding="0" />
           </a>
         <div class="change_photo">
                <a class="change_photo_link"></a>
              <div class="bubmenu">
                 <ul class="root">
                   <li><a href="#">Fotoğrafı değiştir</a></li>
                   <li><a href="#">Fotoğrafı kaldır</a></li>
                 </ul>
              </div>
    
            </div>
        </div>
        <div class="img_200px200px">
            <a href="#">
              <img src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="auto" padding="0" />
            </a>
            <div class="change_photo">
                <a class="change_photo_link"></a>
              <div class="bubmenu">
                 <ul class="root">
                   <li><a href="#">Fotoğrafı değiştir</a></li>
                   <li><a href="#">Fotoğrafı kaldır</a></li>
                 </ul>
              </div>
    
            </div>
        </div>
    </div>

    <div class="cover-big_img">
                <div class="profile_photo">
                   <a href="#">
                     <img src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="105" height="105" />
                   </a>
                </div>
               
        <a href="index.php"><div class="img_400px400px"><img src="cvr/5.jpg" width="400" height="auto"/></div></a>
      </div> 
      <div class="cover_img">
        <div class="img_200px200px">
            <a href="#">
              <img src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="auto"...

CSS

.cover_container {
  width:981px;
  height:400px;
  float:left; 
}
.cover_img {
  float:left;
  width:200px;
  height:400px; 
  background-color:#000;
}
.img_200px200px {
  float:left;
  width:198px;
  height:198px;
  margin:1px;
  overflow: hidden;
}

.img_200px200px img {
   width: 100%;
}
.img_200px200px img.height {
   width: auto;
   height:100%;
}

.cover-big_img {
    float:left;
    width:580px;
    height:400px;   
}

.img_400px400px {
  float:left;
  width:580px;
  height:400px;
  margin:1px;
  overflow: hidden;
  background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 120% );
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 120% );
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 120% );
}

.img_400px400px img {
   width: 100%;
   z-index:-1;
   position: relative;
}
.img_400px400px img.height {
   width: auto;
   height:100%;
}

.profile_photo {
	float:left;
	width:105px;
	height:105px;
	border:5px solid #FFF;
	overflow:hidden;
	position:absolute;
	background-color:#FFF;
	margin-left:230px;
	margin-top:130px;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-o-border-radius:8px;
	}
.profile_photo img {
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-o-border-radius:6px;
	}
.change_photo {
  float:left;
  background-color:#fff;
  width:20px;
  height:20px;
  display:none;
  position:absolute;
  z-index:1;
  margin-top:-195px;
  margin-left:167px;
  
	}
.img_200px200px:hover .change_photo {
	display:block;
	}
a.change_photo_link{
    position:absolute;
    line-height:25px;
    width:20px;
    height:20px;
    cursor:pointer; 
    display:block;
    border: 1px solid rgba(128,128,128,1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #2cbdf2 0%,#f0f0f0 0%,#d9d9d9...

JavaScript

$(document).ready(function()
{	 $(".change_photo_link").click(function(event)
    {
        var $cover_img = $(this).closest(".cover_img");     
        $(".change_photo", $cover_img).toggleClass('open');
        $(".bubmenu", $cover_img).toggle();
    })
    
    $(".cover_img").on( "mouseleave", function(){
        $('.change_photo', this).removeClass('open');
        $('.bubmenu', this).hide();
    })   
   
});