画像の中央に文字＆背景色を載せて、hoverした時に画像をその枠内に表示したいです。

![説明]
画像の中央に文字＆背景色を載せて、hoverした時に画像をその枠内に表示したいです。

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10
11    <link rel="stylesheet" href="style.css">
12    <title>Title</title>
13
14    
15  </head>
16  <body>
17<div class="d-flex">
18    <div class="box project-category" style="background-color:#41302a">
19      <img src="img/img1.jpg" class="w-100 project-image" alt="">
20      <div class="category-name">
21        Services
22      </div>
23      
24    </div>
25    <div class="box project-category" style="background-color:#FF4E02">
26      Publications
27    </div>
28  </div>
29 <!-- Optional JavaScript -->
30    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
31    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
32    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
33    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
34  
35    
36
37    <script type="text/javascript" src="javascript.js"></script> 
38    
39    <script>
40      $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
41          if(this.id != 'navbarDropdown'){
42            $('.navbar-collapse').collapse('hide');
43          }
44      });
45      </script>
46  </body>
47</html>

CSS
1.box {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  flex-direction: column;
6  width: 100vw;
7  height: 35vw;
8  text-align: center;
9}
10
11.category-name {
12  color: blue;
13  font-size: 5vw;
14  font-weight: 500;
15}
16
17.box:hover {
18  opacity: 0;
19  transition: opacity 1s ease;
20}
21
22.category-name:hover {
23  color: blue;
24  font-size: 5vw;
25  font-weight: 500;
26  opacity: 0.5;
27}
28
29.project-image {
30  padding: 0;
31  margin: 0;
32  height: 100%;
33  width: 100%;
34}

宜しくお願い致します。

yambejp

2020/10/16 09:23

手書きでいいので図示できませんか？

Larkiwing

2020/10/16 10:55

サポートありがとうございます。デザインサイトのスクショを貼り付けました。なお、このデザインサイトはコードはでないので、コピペできませんでした。こちらでよろしいですか？

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

回答1件

ベストアンサー

こんにちは。

画像の opacity を変更すればいいかと思います。

css
1/*.box:hover {
2  opacity: 0;
3  transition: opacity 1s ease;
4}*/
5
6.box img {
7  opacity: 0;
8  transition: opacity 1s ease;
9}
10
11.box:hover img {
12  opacity: 1;
13}