画像のように上側・下側どちらを押してもマウスオーバーが発動するように設定を行いたいです。

Question

現状

画像のように、上側・下側どちらを押しても、
マウスオーバーが発動するように設定を行いたいです。

どのような方法で、こういったことが可能でしょうか。
実際は上下のセットを複数実装したいと思っております。

どう検索して良いか分からずこちらで投稿させていただきました。
手付かずで申し訳ありませんが、ご教示いただければ幸いです。
よろしくお願いいたします。

	<section class="contents l-c-b">

	<a href="#">
	<div class="c-btn">
	<figure class="hover-parent">
	<img src="../assets/a.jpg" alt="Aさん" class="hover-img">
	<figcaption class="hover-mask">Aさん</figcaption>
	</figure>
	</div>
	</a>

	</section>

.c-btn::before{
	content: '';	
	position: absolute;
	top: -25px;
	width: 15%;
	height: 15px;
	background:#000; 
}

.contents{
    position: absolute;
    top: 75%;
    width: 60%;
    margin: 0 auto;
}

.c-btn{
    width: 90%;
    cursor: pointer;
    margin: 0 auto;
}

.hover-parent {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    position: relative;
    top: 0;
    bottom: 0;
    font-size: 120%;
    text-align: center;
    color: #fff;
}
.hover-parent .hover-mask {
    width: 100%;
    height: 97.6%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(39,39,39,0.91);
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.hover-parent:hover .hover-mask {
    opacity: 1;
    padding-top: 80px;
}

Comments

[kei344]

「上側」のHTMLも質問文に追加してください。

[renmo]

上側はこの部分になります。現在、擬似要素で作成しております。

.c-btn::before{
content: '';
position: absolute;
top: -25px;
width: 15%;
height: 15px;
background:#000;
}

Answer 1

a:hover .hover-parent .hover-mask {
    opacity: 1;
    padding-top: 80px;
}
```**動くサンプル：**[https://jsfiddle.net/khtvqoL5/](https://jsfiddle.net/khtvqoL5/)

Comments

[renmo]

ご教示いただきありがとうございました。
想像通り実装することができました。

サンプルも作成いただき、ありがとうございました。
とても分かり易かったです。