hoverで画像表示を変える

2123 ワード
Rails Hover 未経験エンジニア Rails テキストリンク

hoverを調べたきっかけ

  • 画像をクリックすると詳細ページに遷移する機能を作ってみた
  • しかし画像上にカーソルを置いてもクリックできるかどうか見た目だけだとわからない。（アクションがない） →　ユーザー視点から、画像をクリックできるか分かりにくい印象。
  • カーソルを画像上に置くと、クリックできるとわかるような動きが欲しい！ 調べるとhoverという機能を発見。実装したので記事にしてみました。

参照

下記サイトを参考にさせて頂きました！
大変参考になりました、ありがとうございました！
https://lab.sonicmoov.com/markup/css/hover-css/

実装したhover


このようにカーソルを画面上に置くと、画像が変化し、クリックしやすくなる

HTML

まずは画像を挿入している部分にクラス名を付ける（今回は、"button grow")

html.erb
<%= link_to public_public_golfcourse_path(golf_course.id) do %>
  <%= attachment_image_tag golf_course, :image, size: "180x120", fallback: "no_image.jpeg",class: "button grow p-2" %><br>
<% end %>

CSS

HTMLでclassをつけたら、次はCSSにhover対応を記述していく。

homes.scss
/* Default styles for the demo buttons */
.button {
  // margin: .4em;
  // padding: 1em;
  cursor: pointer;
  // background: $primaryColour;
  text-decoration: none;
  color: $secondaryColour;
}

/* 2D TRANSITIONS */

/* Grow */
.grow {
  display: inline-block;
  transition-duration: $defaultDuration;
  transition-property: transform;

  @include hideTapHighlightColor();
  @include hardwareAccel();
  @include improveAntiAlias();

  &:hover {
    transform: scale(1.1);
  }
}

クラス名とCSSを少しいじるだけで、使い勝手のいいものになりました！