Responsive CSS3 double hover effect

Learn how to create Responsive CSS3 double hover effect using html, css and/or js.

<div class="widget-wrap">
		<article class="type-page">
			<a href="#">
				<img width="350" height="200" src="https://htmlnoob.com/static/logo.png" alt="">
				<div class="hovertitle">
					<h4 class="widget-title">hallo</h4>
				</div>
				<div class="hovercontent">
					<div class="entry-content">
						<p>
							Read More
						</p>
					</div>
				</div>
			</a>			
		</article>
	</div>
<style>
.widget-wrap {
	position: relative;
	text-align: center;
	margin-right: 3%;
	width: 30%;
	float: left;
}

.type-page {
	width: auto;
	background-color: red;
}

.widget-wrap .type-page a {
}

.type-page img{
	max-width: 100%
}

.hovertitle {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0.9;
    backface-visibility: hidden;
    transition: opacity 0.3s;
    background-color: blue;
}

.widget-wrap h4 {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	font-size: 40px;
	display: table;
  	height: auto;
  	width: 100%;
}

.hovercontent {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
    backface-visibility: hidden;
    transition: opacity 0.3s;
}

.type-page .entry-content {
	position: absolute;
	top: 20%;
	left: 0;
	height: 60%;
  	width: 100%;
  	background-color: green;
}

.entry-content:before {
	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
  	margin-right: -0.3em; /* Adjusts for spacing */
}

.type-page .entry-content p {
	display: inline-block;
  	vertical-align: middle;
  	width: auto;
	background-color: #fff;
	border-left: 2px solid red;
	margin: 0;
	padding: 12px;
}

.type-page:hover .hovertitle {
	opacity: 0;
}

.type-page:hover .hovercontent {
	opacity: 1;
/*     pointer-events: none; */
}
</style>

Responsive CSS3 double hover effect

Random HTML Example Codes: