マウスオーバー解除

Question

いつもお世話になっております。

画像の上にマウスを載せたら文字がでてくるマウスオーバーを
組み込んでるのですが、マスオーバーしなくても
最初から文字が出ている状態に変更したいのですが、
コードのどの部分から変更をすればよいのかわかりません…。
ご教示していただけたら幸いです。

使っているページURL
https://www.rakuten.ne.jp/gold/tokeiten/feature/xc-monitor/index.html

Accepted Answer

ECマスターズの伊藤です。

> 組み込んでるのですが、マスオーバーしなくても
> 最初から文字が出ている状態に変更したいのですが、
> コードのどの部分から変更をすればよいのかわかりません…。

style.cssを下記の通り修正していただきますと、
マウスオーバーしていない状態で表示されるように
なると思いますので、お試しくださいませ。

修正
=====
.tiles .tile:before {
content: '';
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
=====
↓↓↓
=====
.tiles .tile:before {
content: '';
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
width: 100%;
height: 50%;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
=====

修正
=====
.tiles .tile .details span {
display: block;
opacity: 0;
position: relative;
top: 100px;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
=====
↓↓↓
=====
.tiles .tile .details span {
display: block;
}
=====

削除
=====
.tiles .tile:hover:before,
.tiles .tile:hover span {
opacity: 1;
}
.tiles .tile:hover:before {
top: 50%;
}
.tiles .tile:hover span {
top: 0;
}
.tiles .tile:hover .title {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.tiles .tile:hover .info {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
=====

Answer

ご回答ありがとうございます！
解決いたしました。