見出し画像

【web】画像リンクのマウスオーバー

つちだにんじん

こんにちは、つちだにんじんです。
今回は画像にリンクを貼った時のマウスオーバーの動きのアイディアをいくつか書きます。
内容は全てHTML・CSSのみです。


クローズアップ

<div class="link-wrap">
  <a href="">ダミー画像</a>
</div>
/*画像の挿入がで着ないためダミー生成*/
a{
  background: repeating-linear-gradient(45deg, #94b8b4 0px, #94b8b4 5px, #c3d5ca 5px, #c3d5ca 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #445c7e;
  text-decoration: none;
  font-size: 130%;
  /*画像のサイズ指定・動作時間指定*/
  width: 300px;
  height: 200px;
  transition: .2s;
}
.link-wrap{
  width: 300px;
  height: 200px;
  overflow: hidden;
}
a:hover{
  transform: scale(1.5);
}

code penでは画像の挿入がでいないので、ダミーを生成しています。
変化がわかりやすいようにlinear-gradientでストライプ模様をつけています。
「display: flex;」「align-items: center;」「justify-content: center;」を記述したのは、文字を上下左右中央に置くためです。

.link-wrapをaと同じサイズで生成して、overflow: hidden;でこのサイズからはみ出た部分を隠します。
こうすることで、マウスオーバーでa要素を拡大させても、はみ出た部分が見えなくなります。

色を重ねる

<a href="">ダミー画像</a>
a{
  width: 300px;
  height: 200px;
  background: #8d8d8d;
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
a::after{
  content: "";
  width: 300px;
  height: 200px;
  position: absolute;
  right: 0;
  top: 0;
  background: transparent;
  transition: 0.5s;
}
a:hover::after{
  content: "";
  width: 300px;
  height: 200px;
  position: absolute;
  right: 0;
  top: 0;
  background: #ff8c00;
  mix-blend-mode: multiply;
}

こちらも画像が挿入できないため、灰色のダミー画像を生成しています。

擬似要素をa要素の上に被せて、色を重ねています。
mix-blend-mode: multiply;は「乗算」です。
opacityで不透明度を変えて重ねてもいいと思います。
そこはお好みで！！


暗くして文字が浮かび上がる

<a href="">ダミー画像</a>
a{
  width: 300px;
  height: 200px;
  background: #8d8d8d;
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
a::after{
  content: "";
  width: 300px;
  height: 200px;
  position: absolute;
  right: 0;
  top: 0;
  background: transparent;;
  transition: 0.5s;
}
a:hover::after{
  content: "タイトル";
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  background: #111;
  opacity: 0.9;
}

こちらも画像が挿入できないため、灰色のダミー画像を生成しています。

上の色を重ねたものの応用みたいなもので、文字をプラスさせただけです。
今度は画像部分を暗くしたかっただけなので、opacityで透明度を変えて重ねています。

文字がスライドして登場

<a href=""></a>
a{
  width: 300px;
  height: 200px;
  background: #8d8d8d;
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
a::before{
  content: "にんじんしりしり";
  opacity: 0;
  transition: 0.5s;
  transform: translateY(-50px);
  z-index: 9;
}
a:hover::before{
  content: "にんじんしりしり";
  opacity: 1;
  transform: translateY(0);
  z-index: 9;
}
a::after{
  content: "";
  width: 300px;
  height: 200px;
  position: absolute;
  right: 0;
  top: 0;
  background: transparent;;
  transition: 0.5s;
}
a:hover::after{
  content: "";
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  background: #111;
  opacity: 0.9;
}

こちらも画像が挿入できないため、灰色のダミー画像を生成しています。（何回目）

文字を::beforeで生成して、色を重ねるのは::afterで生成しています。
::beforeの文字にopacityとtransformの変化を与えることで、だんだんと浮かび上がりながらスライドインしてくる文字にしています。

例は上から下にスライドインしていますが、transformの値を変えることで下からスライドインしてきたり、横からスライドインしてきたり・・・
transform: scale();にすればだんだんと大きくなりながら浮かび上がるようにすることもできます。

色がスライドイン

これはマウスオーバーした時に色がシューっとスライドインしてきます。

<a href="">画像</a>
a{
  width: 300px;
  height: 200px;
  background: #8d8d8d;
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
a::after{
  content: "";
  background: rgba(17,17,17,0.6);　/* ここの色はご自由に！ */
  width: 300px;
  height: 200px;
  transition: .8s;
  transform: translateX(-300px);
  position: absolute;
}
a:hover::after{
  content: "";
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0px);
}

a要素にoverflow: hidden;を指定することで、擬似要素で生成した部分が枠外に出たら見えなくなるようにしています。
擬似要素の初期値をtransform: translateX(-300px);で枠外にに出しておき、マウスオーバーするとtransform: translateX(0px);で戻ってくるようにしています。

因みにこれも、サンプルでは横からスライドしてきていますが、transform: translateYを使えば上下からのスライドも実装できます。


画像の上からひょっこり出てくる

これはマウスオーバー時にひょっこりキャラクターとかが出てくるものです。

<a href="">画像</a>
a{
  width: 300px;
  height: 200px;
  background: #8d8d8d;
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
a::before{
  content: "";
  width: 100px;
  height: 150px;
  background: #f44e03;
  position: absolute;
  z-index: -1;
  right: 0;
  top: 10px;
  transition: .2s;
}
a:hover::before{
  content: "";
  width: 100px;
  height: 150px;
  background: #f44e03;
  position: absolute;
  transform: rotate(45deg) translateX(30px);
}

codepenなので画像挿入ができずナニコレ？？みたいになるかもしれませんが、マウスオーバーで出てくるオレンジの物体をキャラクターなどのイラストにするなどすれば、可愛い感じになるかと思います・・・。

ひょっこり具合は数値をお好みで調整してください。



以上です！！
以下の記事もよければご参考にどうぞ！！！


リンクボタンのマウスオーバーアイディア↓

cssアニメーションアイディア↓


私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！


いいなと思ったら応援しよう！