0
ボランティアスタッフの名前と詳細を検索するPHPクエリがあります。これらは、サムネイル画像として左から右の行に表示されます。ホバーでは、詳細を表示するためにCSSを使用して容易になります。divを固定し、divの両側をホバリングで移動するにはどうすればいいですか？
<?php while($fetch = $result->fetch_assoc()) {
$Name =str_replace('-',' ',$fetch['Name']);
$About =str_replace('-',' ',$fetch['About']);
$id = $fetch['id'];
$Thumb = $fetch['Thumbnail'];
$class++;
if ($class == $max) {
$class =0;
}
if ($class > 5) {
$id = ("thumbnail_r"); //changes to id so the thumb floats right
}
else if($class < 6) {
$id = ("thumbnail_l");//changes to id so the thumb floats left
}
?>
<div id="thumb_w"><p><?php echo '<img src="staff/'.$Thumb.'" alt="'.$Name.'" width="100px" height="100px" id="'.$id.'"/>';?>
<?php echo $Name?>
<?php echo $About?></p>
</div>
<?php
}
} else {
echo "0 results";
}
css。
#thumb_w{
border: 6px inset #0c3af0;
-webkit-box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
-moz-box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
height: 111px;
width: 111px;
margin: 3px;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
overflow:hidden;
background-color: rgb(160, 156, 250);
float: left;
}
#thumb{
z-index:1;
border: 6px inset #0c3af0;
-webkit-box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
-moz-box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
box-shadow: 10px 10px 29px -4px rgba(100,90,232,1);
transition:1.5s ease-in-out;
height: 121px;
}
#thumb_w:hover {
width: 500px;
height: auto;
max-height: 111px;
z-index: 10;
position: absolute;
display: inline-block;
max-height: 111px;
}
img#thumbnail{
max-width: 108px;
width: -webkit-fill-available;
height: auto;
min-height: 99px;
max-height: 120px;
}
#thumbnail_l{
float: left;
clear: both;
}
#thumbnail_r{
float: right;
clear: both;
}
あなたが固定のままにに置いて、他のすべてのサムネイルが離れてスライドのサムネイルを作る方法はあります。それはCSSである必要はありません、これは私が使用しているものです。