JSFiddle - React, Tailwind, and code Playground

by Kim Ara

HTML

<dl>
  <dt></dt>
  <dd>
    <div class="ico-plusminus"></div>   
  </dd>
</dl>

CSS

*{margin:0;padding:0}
dl{width:200px;height:300px;border:1px solid #ddd;transition:all 1s}
dt{width:100%;height:200px;background:url(https://products.rivian.com/wp-content/themes/rivian-wp/dist/assets/images/img--product-feature-carousel-small-3-truck.jpg)0 50% no-repeat;transition:all 1s}
dd{width:100%;height:100px;background:#000;color:#fff;position:relative}
dt:hover{background-position:100% 50%;}
.ico-plusminus{    
  bottom: 0;
  height: 28px;
  position: absolute;
  right: 0;
  transform: translate(0);
  transition: transform .2s ease-out;
  width: 28px;
}
.ico-plusminus:before{    
  background-color: #d6d4cf;
  content: "";
  display: block;
  height: 28px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: transform .2s ease-out;
  width: 2px;
}
.ico-plusminus:after{    background-color: #d6d4cf;
  content: "";
  display: block;
  height: 28px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%) rotate(-90deg);
  transition: transform .2s ease-out;
  width: 2px;
}
.ico-plusminus:hover:before{
  transform:translate(-50%, -50%) rotate(-90deg);
}