画像にマウスが乗ったとき表示を変えたいです

###前提・実現したいこと
現状はこのマウスが乗る前はこのようになり

マウスが乗ると画像の様に背景が真っ白になってしまいます。

マウスが乗ったときどのようにしたいかというとこの下の画像のようにしたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width,initial-scale=1.0">
6	<link rel="apple-touch-icon" href="icon/logo.jpg">
7	<link rel="stylesheet" href="css/style.css">
8	<link rel="stylesheet" href="css/normalize.css">
9	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10	<script type="text/javascript" src="slick/slick.min.js"></script>
11	<title>lanugo</title>
12</head>
13<body>
14	<header>
15		<div class="header__wrap flex">
16			<a href="">
17				<div class="header__left">
18					<div class="header__logo">
19						<img src="img/logo.jpg">
20					</div>
21					</div>
22			</a>	
23			<nav class="nav">
24				<ul class="nav__gNav flex">
25					<li><a href="">menu</a></li>
26					<li><a href="">news</a></li>
27					<li><a href="">concept</a></li>
28					<li><a href="">access</a></li>
29					<li><a href="">contact</a></li>
30				</ul>
31			</nav>
32		</div>
33	</header>
34	<div class="mainVisual">
35		<div class="concept">
36			<img src="img/concept.png">
37		</div>
38	</div>
39	<div class="main">
40		<div>
41		<img src="img/main_content.png" class="main__img">
42			<div class="main__item--1">
43				<div class="main__item--text">
44					心から｢きれいに｣｢かわいく｣したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。
45				</div>
46			</div>
47			<div class="main__item--2">
48				<div class="main__item--text">
49					<p>お客さまと信頼しあえる関係性で一緒に都市を重ねていきたいという思いから、わかりやすい料金メニューにしています。施術に追加でオプションがつくことはありません。</p>
50				</div>
51			</div>
52			<div class="main__item--3">
53				<div class="main__item--text">
54					<p>丁寧な施術ができるように一対一で施術をおこなえるようにしております。丁寧な施術をおこないます。</p>
55				</div>
56			</div>
57			<div class="main__item--4">
58				<div class="main__item--text">
59					<p>LINE@を使ったスタイリングのアドバイスや髪のケアなど、お家に帰った後のご相談もきがるにできます。</p>
60				</div>
61			</div>
62			<div class="main__item--5">
63				<div class="main__item--text">
64					<p>アットホームな空間をご用意させてもらうことで、スタイルやケア、その他のこともお客さまから伝えやすくなる工夫をしています。</p>
65				</div>
66			</div>
67			<div class="main__item--6">
68				<div class="main__item--text">
69					<p>最新のトレンドのスタイルを取り入れながら、お客さまに似合う髪型を提案します。小顔矯正立体カットの資格を持ち、骨格や肩幅から似合せを提供します。</p>
70				</div>
71			</div>
72		</div>
73	</div>
74	<div class="information flex">
75		<div class="information__left">
76			<div class="information__text">
77				<p>営業日 : 火曜日~日曜日(金曜日のみ20:00まで)</p>
78				<p>営業時間 : 11:00~19:00</p>
79				<p>住所 : 和歌山市12番町15島ビル 2F</p>
80				<p>TEL : 0734-88-2668</p>	
81		<div class="facebook">
82			<div id="pagePlugin">
83				<div class="fb-page" data-href="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/">Hair&amp;lifedesign lanugo</a></blockquote>
84				</div>
85			</div>	
86			</div>
87		</div>
88	</div>
89	<div class="information__right">
90		<img src="img/information1.png">
91		<img src="img/information2.png">
92	</div>
93</div>
94<div class="instagram">
95	<iframe src="https://snapwidget.com/embed/423101" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:200px"></iframe>
96</div>
97
98<div id="fb-root"></div>
99
100<script>
101	(function(d, s, id) {
102		var js, fjs = d.getElementsByTagName(s)[0];
103	if (d.getElementById(id)) return;
104		js = d.createElement(s); js.id = id;
105		js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=1881778235415743";
106		fjs.parentNode.insertBefore(js, fjs);
107}(document, 'script', 'facebook-jssdk'));</script>
108</body>

css
1body {
2	letter-spacing: .1em;
3	line-height: 1.5em;
4	font-size: 62.5%;
5    font-weight: 200;
6	font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
7}
8header {
9	width: 100%;
10    position: fixed;
11    z-index: 10000;
12    background-color: #fff;
13}
14.flex{
15	display: flex;
16}
17.header__logo {
18    margin: 0 50px;   
19}
20.header__wrap {
21	margin: 0 auto;
22	padding: 15px 0;
23	position: relative;
24	justify-content: space-between;
25	flex-wrap: wrap;
26	align-items: center;
27}
28.nav__gNav li {
29	margin: 0 10px;
30	padding: 1px 4px;
31	font-size: 2.5rem;
32    color: #4d4d4d;
33}
34.mainVisual {
35    background-image: url(../img/main.jpg);
36    width: 100%;
37    height: 650px;
38    position: relative;
39    background-position: center center;
40    background-repeat: no-repeat;
41    background-size: cover;
42}
43.concept {
44    width: 900px;
45    top: 490px;
46    bottom: 0;
47    left: 100px;
48    right: 0;
49    position: absolute;
50    margin: 0 auto;
51}
52.main {
53    height: 100vh;
54    width: 1200px;
55    margin: 410px auto 0;
56    position: relative;
57}
58.main__img {
59    position: absolute;
60    top: 170px;
61    left: 230px;
62    z-index: 100;
63}
64/*マウスが乗った*/
65.main__item--1{
66    background-image: url(../img/mainitem1.png);
67    width: 300px;
68    height: 295px;
69    position: absolute;
70    top: -79px;
71    left: 43px;
72    z-index: 1;
73}
74.main__item--1:hover {
75    background-image: url(../img/mainitemh1.png);
76    background-repeat: no-repeat;
77}
78.main__item--2{
79    background-image: url(../img/mainitem2.png);
80    width: 220px;
81    height: 275px;
82    position: absolute;
83    top: 34px;
84    left: 731px;
85    z-index: 1;
86}
87.main__item--2:hover {
88    background-image: url(../img/mainitemh2.png);
89    background-repeat: no-repeat;
90}
91.main__item--3{
92    background-image: url(../img/mainitem3.png);
93    width: 205px;
94    height: 200px;
95    position: absolute;
96    top: 247px;
97    left: 268px;
98    z-index: 1;
99}
100.main__item--3:hover {
101    background-image: url(../img/mainitemh3.png);
102    background-repeat: no-repeat;
103}
104.main__item--4{
105    background-image: url(../img/mainitem4.png);
106    width: 215px;
107    height: 215px;
108    position: absolute;
109    top: 360px;
110    left: 523px;
111    z-index: 1;
112}
113.main__item--4:hover {
114    background-image: url(../img/mainitemh4.png);
115    background-repeat: no-repeat;
116}
117.main__item--5{
118    background-image: url(../img/mainitem5.png);
119    width: 234px;
120    height: 234px;
121    position: absolute;
122    top: 581px;
123    left: 784px;
124    z-index: 1;
125}
126.main__item--5:hover {
127    background-image: url(../img/mainitemh5.png);
128    background-repeat: no-repeat;
129}
130.main__item--6{
131    background-image: url(../img/mainitem6.png);
132    width: 330px;
133    height: 245px;
134    position: absolute;
135    top: 617px;
136    left: 191px;
137    z-index: 1;
138}
139.main__item--6:hover {
140    background-image: url(../img/mainitemh6.png);
141    background-repeat: no-repeat;
142}
143.information {
144    width: 1200px;
145    margin: 340px auto 0;
146    justify-content: space-around;
147    color: #666;
148}
149.information__text {
150    margin-left: 30px;
151}
152.information__text p {
153    margin-top: 7px;
154    font-size: 2rem;
155    letter-spacing: 5px;
156}
157.information__text p:nth-of-type(3) {
158    margin-top: 40px;
159}
160.information__right img:last-child {
161    margin-top: 30px;
162}
163.facebook {
164    margin-top: 30px; 
165}
166.instagram {
167    margin-top: 50px;
168    width: 100%;
169
170}
171.main__item--text {
172    width:          100%;
173    height:         100%;
174    opacity:        0;  /* マスクを表示しない */
175    -webkit-transition: all 0.2s ease;
176    transition:     all 0.2s ease;
177}
178.main__item--text:hover {
179    opacity: 1; /* マスクを表示する */
180    padding-top: 110px;
181}

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

回答4件

ベストアンサー

現在はどのような症状なのでしょうか？ご提示のクラス名は間違いでは無いしょうか？（「main__item--1」「～--2」）不明なので、何とも言えませんが、マスクとして<div class="main__item--text">を設定する場合だと思いますが、マウスのON・OFFともopacity: 0;になっているので

CSS
1.main__item--text:hover {
2    opacity: 1;  /* マスクを表示する */
3}
4```ではどうでしょうか？

投稿2017/08/13 00:33

yoshinavi

総合スコア3525

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

追記

関連した質問