JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<div class="obrtlcsdoor">
    <div class="obrtlcsdoorimage">
        <img src="http://outerbridge.co/nonwpitems/e-door.png">
    </div>
    <span>
        <a href="http://outerbridge.co/">Contact Us</a>
    </span>
</div>

CSS

.obrtlcsdoor {
	z-index: 10;
	float: left;
	display: block;
	margin: 10px;
	height: 100px;
	width: 263px;
	background: #ff6900 url('http://outerbridge.co/nonwpitems/e-door-open.png') no-repeat top left;
	overflow: hidden;
	line-height: 100px;
}
.obrtlcsdoor span {
	width: 188px;
	padding: 0 10px 6px;
	font: bold 21px/24px 'Cabin', Arial, sans-serif;
	line-height: 24px;
	display: inline-block;
	vertical-align: middle; 
	text-align: center;
}
.obrtlcsdoor span a {
	display: block;
}
.obrtlcsdoor span a:link,
.obrtlcsdoor span a:visited {
	text-decoration: none;
	color: #fff;
}

.obrtlcsdoor span a:hover {
	text-decoration: none;
	color: #ffba8a;
}
.obrtlcsdoorimage {
	display: block;
	float: left;
	height: 100px;
	width: 55px;
}
.obrtlcsdoorimage img {
	width: 100%;
	height: 100%;
}

JavaScript

$('.obrtlcsdoor span a').mouseover(function(){
	$(this).closest('div').children('.obrtlcsdoorimage')
		.stop()
		.animate({
				marginLeft: 55,
				width: 0
			}, 500)
		.height();
});
$('.obrtlcsdoor span a').mouseout(function(){
	$(this).closest('div').children('.obrtlcsdoorimage')
		.stop()
		.animate({
				marginLeft: 0,
				width: 55
			}, 500)
		.height();
});