phpでfigcaptionの実験をしてみましたが、今まで解決できなかったエラーが見つかりました..
figcaption は php なしで問題なく動作していますが、php と組み合わせるとエラーが発生します
私のphp:
<h1>Article</h1>
<figure>
<?
include("koneksi.php");
$lihat=mysql_query("SELECT * FROM papi ");
$j=0;
while($datax = mysql_fetch_array($lihat)){
echo "<img src="\images/$datax[3]\"><figcaption>
<h3>$datax[1]</h3><p>$datax[2]</p>";
}
$j++;
?>
</figure>
私のCSS:
body {
width:400px;
margin:50px auto;
font-family:sans-serif;
}
img {
width:100%;
}
figure {
margin:0;
position:relative;
border:5px solid white;
-webkit-box-shadow:0 0 4px rgba(0,0,0,.3);
-moz-box-shadow:0 0 4px rgba(0,0,0,.3);
box-shadow:0 0 4px rgba(0,0,0,.3);
display:block;
cursor:pointer;
overflow:hidden;
}
figure:hover figcaption {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
opacity:1;
-webkit-transform:rotate(0);
-moz-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
top:0;
}
figcaption {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
opacity:0;
position:absolute;
height:100%;
width:100%;
top:-100%;
background:rgba(0,0,0,.4);
color:white;
-webkit-transition:all .4s ease-in;
-moz-transition:all .4s ease-in;
-o-transition:all .4s ease-in;
-ms-transition:all .4s ease-in;
transition:all .4s ease-in;
-webkit-transition-delay:.5s;
-moz-transition-delay:.5s;
-o-transition-delay:.5s;
-ms-transition-delay:.5s;
transition-delay:.5s;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
figure img {
-webkit-transition:all 1.5s;
-moz-transition:all 1.5s;
-o-transition:all 1.5s;
-ms-transition:all 1.5s;
transition:all 1.5s;
}
figure:hover img {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
}
figcaption h3,figcaption p {
padding:10px 20px;
margin-bottom:0;
margin-top:0;
position:relative;
left:100%;
-webkit-transition:all .4s;
-moz-transition:all .4s;
-o-transition:all .4s;
-ms-transition:all .4s;
transition:all .4s;
}
figure:hover h3,figure:hover p {
left:0;
}
figcaption h3 {
background:black;
margin-top:20px;
}
figcaption p {
-webkit-transition-delay:1.2s;
-moz-transition-delay:1.2s;
-o-transition-delay:1.2s;
-ms-transition-delay:1.2s;
transition-delay:1.2s;
}
figcaption h3 {
-webkit-transition-delay:1s;
-moz-transition-delay:1s;
-o-transition-delay:1s;
-ms-transition-delay:1s;
transition-delay:1s;
}
figcaption a {
color:white;
}
コネクシ php :
<?php
define("HOST","localhost");
define("USER","root");
define("PASS","");
define("DB","test");
$connect=mysql_connect(HOST,USER,PASS);
if (!$connect){
echo "Koneksi gagal dilakukan";
}
$db=mysql_select_db(DB);
if (!$db){
echo "Database gagal dipilih";
}
?>
私のデータベースフィールド:キャプションコンテンツ画像がありません