Baul sin JS :( Parte1

<link href="https://fonts.googleapis.com/css?family=Barlow:600|Great+Vibes&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<div class="fond"><div class="contenedor-img"><div class="im" id="one" style="background:url(http://via.placeholder.com/130)center; background-size:cover;"><div class="blimg"></div></div><div class="im" id="two" style="background:url(http://via.placeholder.com/130)center; background-size:cover;"><div class="blimg"></div></div><div class="im" id="three" style="background:url(http://via.placeholder.com/130)center; background-size:cover;"><div class="blimg"></div></div><div class="im" id="four" style="background:url(http://via.placeholder.com/130)center; background-size:cover;"><div class="blimg"></div></div><div class="im" id="five" style="background:url(http://via.placeholder.com/130)center; background-size:cover;"><div class="blimg"></div></div><div class="im" id="six" style="background:url(http://via.placeholder.com/130)center; background-size:cover;"><div class="blimg"></div></div></div><div class="cred"><a href="https://bettyleg.tumblr.com/">BettyLeg</a></div></div>

<style>.fond{ width:500px; height:355px; border:1px solid #eee; margin:20px auto; padding:10px; background:#FBFAFA; outline:1px solid #eee; outline-offset:8px; } .contenedor-img{width:400px; height:266px; margin:7px auto; display:grid; grid-template-columns: auto auto auto; outline:1px solid #eee; background:#fff; padding:35px;} .im{width:130px; height:130px; background:#ddd; top:0; left:0;webkit-transition: 1s; -o-transition:1s; transition: 1s;} .im img{width:130px; height:130px; z-index:14!important;} .im:hover .blimg{height:130px; width:130px; position:relative; margin-bottom:-14.4px; background:rgba(255,255,255,0.3);}.cred{font-family:arial; text-transform:uppercase; font-size:8px;} .cred a{color:#ccc!important; text-decoration:none;}</style>