推しミネラルウォーターはありますか？

おしえて

マウスオーバーで画像を拡大する。

解決済

  • 質問者：Campus2
  • 質問日時：
  • 回答数：2件

htmlとcssを使いマウスオーバーで画像を拡大したくて、
https://www.jungleocean.com/programming/190208mo …
以上のサイトのプログラムを、試したところ！まったく画面に変化なしで
失敗です。　初心者ですが、何でも初めて事なので、最初からうまくいく
わけがないのですが、どうしたら、マウスオーバーで画像がの拡大ができ
ますか？
よろしくお願いいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
li{ display:inline-block;}

.img-contain img {
width: 20vw; height: 33.3vh;
margin: 3.15vw 0 3.15vw 3.15vw;
object-fit: contain;
}

</style>

</head>
<body>
<header>
<div class="logo">
<a href="index.html"><img src="images/top.png" alt="TOP" style="width:10%; position:absolute; top:-1px; left:-10px;" ></a>
</div>
<center>
<ul class="global-nav" style="font-size:40px;">
<li><a href="portfolio.html">Leaf</a></li>
<li><a href="about.html">Flower</a></li>
<li><a href="">Disney's</a></li>
</center>
</nav>
</header>
<div class='img-contain' >
<div class="moimg1">
<img src="images/Dis/14371.jpg">
<img src="images/Dis/14372.jpg">
<img src="images/Dis/14373.jpg">
<img src="images/Dis/14374.jpg">
<img src="images/Dis/14375.jpg">
<img src="images/Dis/14376.jpg">
<img src="images/Dis/14377.jpg">
<img src="images/Dis/14378.jpg">
<img src="images/Dis/14379.jpg">
<img src="images/Dis/14380.jpg">
</div>
</div>
</body>
</html>

Cssに以下を組み込みました。

.moimg1 {
overflow: hidden;
width: 350px;
height: 240px;
}
.moimg1 img {
width: 350px;
display: block;
transition: 0.5s;
}
.moimg1 img:hover {
transform: scale(1.1, 1.1);

.moimg1 {
overflow: hidden;
width: 350px;
height: 240px;
}
.moimg1 img {
width: 350px;
display: block;
transition: 0.5s;
}
.moimg1 img:hover {
transform: scale(1.1, 1.1);
}

質問者からの補足コメント

  • ご回答くださいまして、ありがとうこざいます。
    手が空き次第、こころみたいと思います。
    しばらくお待ちください。

    No.1の回答に寄せられた補足コメントです。 補足日時：2019/11/23 12:14
    通報する

  • うーん・・・

    ありがとうございます。
    マウスオーバーで、拡大に成功しました。^^
    プログラムは以下です。
    http://afurieitohannei.la.coocan.jp/sns/12wake.htm
    しかし、いままでは、画像が１２分割で並んでいましたが！
    今度は、縦一線に並んでしまいました。
    １２分割にならないでしょうか？
    よろしくお願いいたします。

      補足日時：2019/11/24 04:55
    通報する

  • 以下のプログラムでokと成りました。
    文字数オーバーで何回かに分けます。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <style>
    li{ display:inline-block; }
    .moimg1 { margin:0 auto;
    width: 350px;
    height: 240px;
    display:flex; flex-wrap:wrap;justify-content: center;
    }
    .moimg1 img { width: 24%;
    transition: 0.5s;
    object-fit: contain;
    }
    .moimg1 img:hover {
    transform: scale(1.1, 1.1);
    }
    </style>
    </head>

      補足日時：2019/11/25 08:13
    通報する

  • <body>
    <header>
    <div class="logo">
    <a href="index.html"><img src="images/top.png" alt="TOP" style="width:10%; position:absolute; top:-1px; left:-10px;" ></a>
    </div>
    <center>
    <ul class="global-nav" style="font-size:40px;">
    <li><a href="portfolio.html">Leaf</a></li>
    <li><a href="about.html">Flower</a></li>
    <li><a href="">Disney's</a></li>
    </ul>
    </center>
    </header>

      補足日時：2019/11/25 08:15
    通報する

  • <div class='img-contain' >
    <div class="moimg1">
    <img src="https://s.yimg.jp/images/ks/clap/image/category/ …
    <img src="https://s.yimg.jp/images/ks/clap/image/category/ …
    <img src="https://s.yimg.jp/images/ks/clap/image/category/ …
    <img src="https://s.yimg.jp/images/ks/clap/image/category/ …
    <img src="images/Dis/14375.jpg">

      補足日時：2019/11/25 08:18
    通報する

  • <img src="images/Dis/14376.jpg">
    <img src="images/Dis/14377.jpg">
    <img src="images/Dis/14378.jpg">
    <img src="images/Dis/14379.jpg">
    <img src="images/Dis/14380.jpg">
    <img src="images/Dis/14381.jpg">
    <img src="images/Dis/14382.jpg">
    </div>
    </div>
    <footer>
    <small>(c)2017 Hattori-studio.</small>
    </footer>
    </body>
    </html>

      補足日時：2019/11/25 08:20
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： nooloor
  • 回答日時：

素人です詳しく有りません



<meta charset="UTF-8">の下に、
<style>
main { display: flex; flex-wrap: wrap; justify-content: space-around; }
</style>


<main>
<img src="images/Dis/14371.jpg">
～
<img src="images/Dis/14380.jpg">
</main>

<main></main>を付け足します

1280画面の結果です、ジャングルオーシャンのとは違う様な。
「マウスオーバーで画像を拡大する。」の回答画像2
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答くださいまして、ありがとうございました。
今後ともよろしくお願いいたします。

通報する
お礼日時：2019/11/25 20:53

No.1

  • 回答者： gura_
  • 回答日時：

Campus2さん



>････マウスオーバーで画像を拡大･･････････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
li{ display:inline-block;}
.img-contain img {
width: 20vw; height: 33.3vh;
margin: 3.15vw 0 3.15vw 3.15vw;
object-fit: contain;
}
.moimg1 {
overflow: hidden;
width: 350px;
height: 240px;
}
.moimg1 img {
width: 350px;
display: block;
transition: 0.5s;
}
.moimg1 img:hover {
transform: scale(1.1, 1.1);
</style>
</head>
<body>
<header>
<div class="logo">
<a href="index.html"><img src="images/top.png" alt="TOP" style="width:10%; position:absolute; top:-1px; left:-10px;" ></a>
</div>
<center>
<ul class="global-nav" style="font-size:40px;">
<li><a href="portfolio.html">Leaf</a>　</li>
<li><a href="about.html">Flower</a>　</li>
<li><a href="">Disney's</a></li>
</ul>
</center>
</header>
<div class='img-contain' >
<div class="moimg1">
<img src="https://oshiete.xgoo.jp/images/v2/common/profile …
</div>
</div>
</body>
</html>
この回答への補足あり
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答くださいまして、ありがとうございました。
ご紹介してくださいました、プログラムに、画像を追加しました。
ところが！、画像自体が出てきません！？
　どこかバグかもしれませんね！？
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
li{ display:inline-block;}
.img-contain img {
width: 20vw; height: 33.3vh;
margin: 3.15vw 0 3.15vw 3.15vw;
object-fit: contain;
}
.moimg1 {
overflow: hidden;
width: 350px;
height: 240px;
}
.moimg1 img {
width: 350px;
display: block;
transition: 0.5s;
}
.moimg1 img:hover {
transform: scale(1.1, 1.1);
</style>
</head>
<body>
<header>
<div class="logo">
<a href="index.html"><img src="images/top.png" alt="TOP" style="width:10%; position:absolute; top:-1px; left:-10px;" ></a>
</div>
<center>
<ul class="global-nav" style="font-size:40px;">
<li><a href="portfolio.html">Leaf</a>　</li>
<li><a href="about.html">Flower</a>　</li>
<li><a href="">Disney's</a></li>
</ul>
</center>
</header>
<div class='img-contain' >
<div class="moimg1">
<img src="images/Dis/14371.jpg">
<img src="images/Dis/14380.jpg">
</div>
</div>
</body>
</html>

通報する
お礼日時：2019/11/23 20:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報