2017-07-27 1 views
-5

enter image description here [画像の説明はこちら] [2]これを行う方法?ホバリングとボックスシャドウを使って最初のdivの幅を外に出し、2番目の幅を外に出しますか?

この操作方法は?ホバリングとボックスシャドウを使って最初のdivの幅を外に出し、2番目の幅を外に出しますか?

https://www.dropbox.com/s/ir8d7iyzrotv58e/Beatles---Copy.jpg?dl=0

+1

ようこそスタックオーバーフロー!コードヘルプを求める質問には、質問自体に** ** [** Stack Snippet **](https://blog.stackoverflow.com/2014/09/introducing-runnable)で**それを再現するのに必要な最短コードを含める必要があります** -javascript-css-and-html-code-snippets /)。 [**最小限で完全で証明可能なサンプルを作成する方法**](http://stackoverflow.com/help/mcve) –

+3

この質問は画像がまだまだ不明*まだ少し不明なので、プラス研究努力も、[mcve]も表示されていません、私はあなたが求めているものが不明なものとして閉じようとしています*。しかし、アブドラは、@ Paulie_Dによって提供されたリンクを読んでそれに応じて回答を編集すると、あなたが探しているヘルプを受け取る可能性が高くなります。また、[ask]をお読みください。 – domsson

+0

Plesaeは、あなたがこれまでに試したことを私たちに示しています。また、いくつかの研究を行うことを検討してください、 "* css *でホバーとシャドウ効果を追加する方法"についての解決策がたくさんあります。 – Zabuza

答えて

0

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background: #eee; 
 
    font-family: sans-serif; 
 
    color: #555; 
 
} 
 
.container { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 10px; 
 
} 
 
img { 
 
    border-radius: 50%; 
 
    height: 50px; 
 
    display: block; 
 
    margin: auto; 
 
    position: relative; 
 
    top: 30px; 
 
    border: 3px solid #ddd; 
 
    background: #eee; 
 
} 
 
.content { 
 
    border: 1px solid #ddd; 
 
    width: 200px; 
 
    height: 100px; 
 
    padding: 20px; 
 
    transition: 0.25s ease; 
 
} 
 
.container:hover .content{ 
 
    box-shadow: 0 0 5px #aaa; 
 
}
<div class="container"> 
 
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"> 
 
    <div class="content"> 
 
    <p>text text text text text text text text text text text</p> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"> 
 
    <div class="content"> 
 
    <p>Text text text text text text text text.</p> 
 
    </div> 
 
</div>

これは、あなたが探しているものですか?より多くの質問がある場合は、コメントで尋ねてください。

+1

これはまったく悪い答えではありませんが、質の低い質問(この場合はまだかなり不明です)への回答を投稿することはややお勧めです。人々が実際に質問を改善するよう促す(または質の高い質問を投稿する)のはやや難しくなります。心に留めておくだけのもの。 – domsson

+1

@domsson ok、私に知らせてくれてありがとう:)私はそれを削除する必要がありますか? – Chesswithsean

+1

までです。あなたはそれに仕事を入れたので、私はしません。将来考慮すべきことです:) – domsson

関連する問題