JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="PortraitFrame">
	<a class="NoLinkBoxes Portrait" href="https://navy.deps.mil/peoeis/sites/nen/Background%20Materials/NEN%20Leadership.aspx#pm">
		<img src="https://navy.deps.mil/peoeis/sites/nen/res/CAPTAbreu_20151002.png" />
		<img src="https://navy.deps.mil/peoeis/sites/nen/res/CAPTAbreu_20151002-hover.png" />
		<p>CAPT Michael Abreu<br>Program Manager</p>
	</a>
</div>
<div class="PortraitFrame">
	<a class="NoLinkBoxes Portrait" href="https://navy.deps.mil/peoeis/sites/nen/Background%20Materials/NEN%20Leadership.aspx#pm">
		<img src="https://navy.deps.mil/peoeis/sites/nen/res/MrAnderson_20150918.png" />
		<img src="https://navy.deps.mil/peoeis/sites/nen/res/MrAnderson_20150918-hover.png" />
		<p>Mr. Phillip Anderson<br>Deputy Program Manager</p>
	</a>
</div>

CSS

.PortraitFrame {
  width: 144px;
  overflow: hidden;
  display: inline-block;
  margin-left: calc(25% - 77px);
  margin-right: calc(25% - 77px);
  vertical-align: top;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  transition: .4s;
}

.Portrait img:first-child {
  position: absolute;
  opacity: 1;
  transition: .4s;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.PortraitFrame:hover,
.Portrait img:first-child:hover {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.Portrait:hover img:first-child {
  opacity: 0;
}

.NoLinkBoxes {
  color: rgba(0, 0, 0, 0) !important;
}

.PortraitFrame > a > p {
  color: #2055a4;
  text-align: center;
  padding: 5px;
  margin: 0;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 15px;
  transition: .3s;
  margin-top: -5px;
  background-image: linear-gradient( to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, #3e628f 50%, #3e628f 100%);
  background-size: 200%;
  background-position-y: 99%;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 134px;
}

.Portrait:hover p {
  color: white;
  background-position-y: 1%;
}