JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="tegrateda_single">
		<img src="https://image.prntscr.com/image/IUXzNrNKQ2_q4ltVpflaww.png" alt="" >
		<div class="soubrid_sawhereg"> 
			<a href="">Здесь ваше ключевое слово</a>
		</div>
</div>

CSS

.tegrateda_single {
    width: 315px;
    height: 215px;
    position: relative;
    overflow: hidden;
    margin: 3px;
    float: left;
    border-radius: 3px;
    border: 2px solid #b1b3b7;
    box-shadow: 0px 4px 10px rgba(64, 59, 59, 0.31), 0px 10px 30px -15px rgba(16, 16, 16, 0.42);
}

.tegrateda_single a {
    vertical-align: middle;
    color: #f1eaea;
    text-decoration: none;
    font-size: 17px;
    font-family: Verdana;
    font-weight: 100;
    text-shadow: 0 1px 0 #151313;
}

.tegrateda_single img {
	width: 315px;
	height: 215px;
}

.soubrid_sawhereg {
		padding-top: 28px;
		height: 93px;
		width: 131px;
		background: #1d1c1c;
		opacity: 0.8;
 	 	filter: alpha(opacity=30); /* IE lt 8 */
		-ms-filter: "alpha(opacity=30)"; /* IE 8 */
		-webkit-transition: 1s;
               -moz-transition: 1s;  /* Firefox 4-15 */
               -o-transition: 1s;  /* Opera 10.5–12.00 */
                transition: 1s;  /* Firefox 16+, Opera 12.50+ */
		position: absolute;
		bottom: -149px;
		left: -149px;
		text-align: center;
		border-radius: 50%;
		-webkit-transform: rotate(0deg);  /* Safari 3.1+, Chrome */
	        -moz-transform: rotate(0deg);  /* Firefox 3.5-15 */
	        -ms-transform: rotate(0deg);  /* IE9+ */
 	        -o-transform: rotate(0deg);  /* Opera 10.5-12.00 */
                transform: rotate(0deg);

	}

.tegrateda_single:hover .soubrid_sawhereg {
	bottom: 3px;
	left: 3px;
	-webkit-transform: rotate(360deg);  /* Safari 3.1+, Chrome */
        -moz-transform: rotate(360deg);  /* Firefox 3.5-15 */
        -ms-transform: rotate(360deg);  /* IE9+ */
        -o-transform: rotate(360deg);  /* Opera 10.5-12.00 */
          transform: rotate(360deg);
}