html - ホバー時に div を展開して詳細情報を表示

Question

ユーザーが div にカーソルを合わせると、より多くの情報が展開されるようにする方法はありますか。私はeコマースサイトでこれをやろうとしているので、名前が表示された画像があり、誰かがホバーすると価格、説明、カートへの追加が左側に表示されます。

Htmlとcssが好まれ、幅を変更して何かを考えていましたが、うまくいきませんでした。

Answer 1

おかしなことに、私はここ数日でこのようなことをしました。

div.portfolio_item{
width:33%;
margin:1.5%;
margin-bottom:-30px;
background-color:white;
border-radius:20px;
float:left;
height:200px;
overflow:hidden;
text-align:justify;}

div.portfolio_item img {
max-width:95%;
margin:auto;}

div.portfolio_item p:first-child{
text-align:center;}

div.portfolio_item p:not(:first-child), div.portfolio_item h3 {
display:none;}

div.portfolio_item:hover p, div.portfolio_item:hover h3 {
display:block;}

div.portfolio_item:hover {
width:80%;
height:80%;
overflow:auto;
position:fixed;
margin:auto;
top:10%;
left:10%;
float:none;
clear:both;
border:solid black 1px;
z-index:10;}

私のポートフォリオページで実際にそれを見ることができます。http://www.briarmoon.ca/design/portfolio.html

画像は最初にあります

ホバーしない限り、他のすべてが非表示になります。その時点で、画面の大部分を占めてポップアップします。

HTH