ホバーした時にCSSだけで出来る画像切り替え方法

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

css

ホバーした時にCSSだけで出来る画像切り替え方法

2022/03/07

マウスオーバー

基本のHTML・css

/* Your code... */

1	/* Your code... */

&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"btn"</span>&gt;
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://hajimete.org/"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"btn_img1.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"ボタン画像１"</span> /&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"btn_img2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"ボタン画像２"</span> /&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>

</a>

</div>

/* Your code... */

1 2	/* Your code... */

<span class="hljs-selector-class">.btn</span> {
	<span class="hljs-attribute">position</span>: relative;
	<span class="hljs-attribute">width</span>: <span class="hljs-number">280px</span>;
	<span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;
	<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;
	<span class="hljs-attribute">display</span>: block;
	<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">12px</span>;
	<span class="hljs-attribute">overflow</span>: hidden;
	<span class="hljs-attribute">cursor</span>: pointer;
}
<span class="hljs-selector-class">.btn</span> <span class="hljs-selector-tag">img</span> {
	<span class="hljs-attribute">position</span>: absolute;
	<span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;
	<span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
	<span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">translate</span>(-50%, -50%);
	<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-50%, -50%);
	<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
	<span class="hljs-attribute">display</span>: block;
	<span class="hljs-attribute">-webkit-transition</span>: .<span class="hljs-number">4s</span> ease-in-out;
	<span class="hljs-attribute">transition</span>: .<span class="hljs-number">4s</span> ease-in-out;
}
<span class="hljs-selector-class">.btn</span><span class="hljs-selector-pseudo">:hover</span> <span class="hljs-selector-tag">img</span><span class="hljs-selector-pseudo">:nth-of-type(2)</span> {
	<span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;
}

.btn {

position: relative;

width: 280px;

height: 80px;

margin: 0 auto;

display: block;

border-radius: 12px;

overflow: hidden;

cursor: pointer;

}

.btn img {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 100%;

display: block;

-webkit-transition: .4s ease-in-out;

transition: .4s ease-in-out;

}

.btn:hover img:nth-of-type(2) {

opacity: 0;

}