IoT-Arduino
9/28/2019 - 6:01 AM

CSSでマウスホバー時に文字列(矢印)を表示するエフェクト

CSSでマウスホバー時に文字列を表示するエフェクト https://blog.raizzenet.com/mouse-hover-caption-effects-in-css/#i-sample1

<section class="dummy">
        <ul class="item-list">
            <li class="item-box">
                <a href="#">Item1</a>
                <div class="mask">
                    <div class="caption"><i class="fas fa-arrow-circle-right">
                        </i></div>
                </div>
            </li>
            <li class="item-box">
                <a href="#">Item2</a>
                <div class="mask">
                    <div class="caption"><i class="fas fa-arrow-circle-right">
                        </i></div>
                </div>
            </li>
            <li class="item-box">
                <a href="#">Item3</a>
                <div class="mask">
                    <div class="caption"><i class="fas fa-arrow-circle-right">
                    </i></div>
                </div>
            </li>
        </ul>
    </section>

.dummy {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 30vh;
  margin: 0;
}
.item-list {
  width: 600px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item-box {
  position:relative;
  list-style: none;
  text-align: center;
  background-color:red;
  width:200px;
  height:200px;
}

.item-box .caption {
	font-size:		300%;
	/* text-align: 		center;
	padding-top:		60px; */
  color:			#fff;
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%,-50%);
  transform: translate(50%,-50%);
}
.item-box .mask {
  position:		absolute;	/* 絶対位置指定 */
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.item-box:hover .mask {
	opacity:		1;	/* マスクを表示する */
}