写真にマウスオーバーすると外側から内側に半透明な影がスライドするアニメーション。

前提・実現したいこと

写真の外側から内側へマウスオーバーしたら囲いのような影がでるアニメーションを作りたいのですが、うまくいきません。どなたかアドバイスいただけると嬉しです。よろしくお願いいたします。

発生している問題・エラーメッセージ

外側から半透明の四角をマウスオーバーで外から内に寄せると、重なった部分の色が濃くなってしまう。
ボーダーを外側から、マウスオーバーで内側に寄せる命令をするとtransitionをいれてもゆっくりうごかない。

該当のソースコード

html
1<div id="img_box5"><img class="img-n5" src="img/1x/page1.jpg">
2<div id="mask5_1"></div><div id="mask5_2"></div><div id="mask5_3"></div><div id="mask5_4"></div>
3</div>

css
1#img_box5 {
2    width: 17em;
3    height: 14em;
4    float: left;
5    margin: 0px;
6    overflow: hidden;
7    position:relative ;
8}
9.img-n5 {
10    width: 17em;
11    height: 14em; 
12}
13#mask5_1{
14    position: absolute;
15    top:0;
16    width: 17em;
17    height: 14em; 
18    border: solid 2em rgba(99, 59, 22, 0.466);
19    transition:0.8s;
20}
21#mask5_2{
22    left:17em;
23    top:0;
24    position: absolute;
25    background-color: rgba(99, 59, 22, 0.466);
26    width: 4em;
27    height: 14em;
28    transition:0.8s;
29}
30#mask5_3{
31    left:0;
32    top:-4em;
33    position: absolute;
34    background-color: rgba(99, 59, 22, 0.466);
35    width: 17em;
36    height: 4em;
37    transition:0.8s;
38}
39#mask5_4{
40    left:0;
41    top:14em;
42    position: absolute;
43    background-color: rgba(99, 59, 22, 0.466);
44    width: 17em;
45    height: 4em;
46    transition:0.8s;
47}
48#mask5_1.active{ box-sizing:border-box;
49}
50#mask5_2.active{left:13em;}
51#mask5_3.active{top:0;}
52#mask5_4.active{top:10em;}
53

js
1var target2 = document.getElementById('img_box5');
2var mask5_1 = document.getElementById('mask5_1');
3var mask5_2 = document.getElementById('mask5_2');
4var mask5_3 = document.getElementById('mask5_3');
5var mask5_4 = document.getElementById('mask5_4');
6
7target2.addEventListener('mouseenter',function(){
8    if(mask5_1.className ==null || mask5_1.className ==""){
9        mask5_1.className = "active";
10        mask5_2.className = "active";
11        mask5_3.className = "active";
12        mask5_4.className = "active";
13    }
14},false);
15target2.addEventListener('mouseleave',function(){
16    if(mask5_1.className = "active"){
17        mask5_1.className = "";
18        mask5_2.className = "";
19        mask5_3.className = "";
20        mask5_4.className = "";
21    }
22},false);

試したこと

周りに四角を配置して、内側に寄せてみる。
box-sizing:border-box;で内側に寄せてみる。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

CSS
1#img_box5 {
2  position: relative;
3  box-shadow: inset 0px 0px 0px 0px rgba(99, 59, 22, 0.466);
4  transition:0.8s;
5}
6
7#img_box5:hover {
8  box-shadow: inset 0px 0px 0px 4em rgba(99, 59, 22, 0.466);
9}
10
11#img_box5 .img-n5 {
12  position: absolute;
13  z-index: -1;
14}

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

投稿2019/04/15 06:56

x_x

総合スコア13749

mogumogu22

2019/04/15 14:26

他にも要素があるせいか写真がどっか行ってしまいましたが、枠はにゅるにゅる動きました。参考になりました！ありがとうございました^^

行動規範の内容に同意します

ベストアンサー

cssだけで、こんな感じでは駄目ですか?

html
1<div class="box">
2  <div class="mask"></div>
3  <div class="img"></div>
4</div>

css
1.box {
2	width: 200px;
3	height: 200px;
4	position: relative;
5}
6.img {
7	width: 100%;
8	height: 100%;
9	background: #f00;
10}
11.mask {
12	border: 0px solid rgba(0,0,0,.1);
13	position: absolute;
14	top: 0;
15	bottom: 0;
16	left: 0;
17	right: 0;
18	z-index: 10;
19	transition: 1s;
20}
21.mask:hover {
22	border: 50px solid rgba(0,0,0,.1);
23}