최근게시물 이미지에 마우스 오버시 내용 출력
본문
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
$list_count = (is_array($list) && $list) ? count($list) : 0;
$thumb_width = 250;
$thumb_height = 250;
?>
<article class="paper-edge flexbox">
<?php
for ($i=0; $i<$list_count; $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
if($thumb['src']) {
$img = $thumb['src'];
} else {
$img = G5_IMG_URL.'/no_img.png';
$thumb['alt'] = '이미지가 없습니다.';
}
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
echo "<div class='wrap'>";
echo "<div class='edge'>";
echo "<a href='". $list[$i]['wr_link1']. "' target='_blank'>". $img_content. "</a>".PHP_EOL;
//echo $img_content;
echo "</div>".PHP_EOL;
// echo "<p>". $list[$i]['subject']. "</p>"; 제목 따오는 부분 주석처리
echo "</div>";
}
if ($list_count == 0) { echo "게시물이 없습니다.";}
?>
</article>
이게 현재 제가 쓰고 있는 최근 게시물의 latest.skin.php 내용인데요 반응형 갤러리 형식입니다. 근데 이 이미지 위에 마우스를 올리면 게시물의 텍스트 내용이 보이게끔 하고 싶거든요. 코드를 찾다보니 아래와 같은 내용을 발견했습니다.
<?
if (!defined('_GNUBOARD_')) exit; //개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$set_value = explode("/","140/140/730");
$thumb_width = $set_value[0]; //썸네일 가로 크기
$thumb_height = $set_value[1]; //썸네일 세로 크기
$bottom_width = ($thumb_width +10 ) * $set_value[2] -10; //전체 가로 크기
?>
<style>
.bott1_img_thumb {width:730px;margin: 0 0 20px 0;}
.bott1_title{display:block;padding:2px 0 2px 20px;margin-bottom:3px;margin-top:3px;font-size:20px ; color:#555; font-weight:bold;border-bottom:1px solid #dde4e9;}
.bott1_title :active {color:#555;text-decoration:none}
.bott1_title a:link {}
.bott1_title a:visited {color:#555;text-decoration:none}
.bott1_title a:hover {color:#fda850;font-size:20px;}
.bott1_thumb ul {margin:0;padding:0;list-style:none;width:730px;zoom:1; text-align:center}
.bott1_thumb ul:after{display:block;visibility:hidden;clear:both;}
.bott1_thumb li {position:relative;float:left;width:<?=$thumb_width?>px;height:<?=$thumb_height?>px;margin: 20px 20px 20px 20px;}
.bott1_img {overflow:hidden;border:1px solid #555;}
.bott1_new {z-index:5;position:absolute;top:-0px;left:-0px;width:65px;height:50px;background:url(<?=$latest_skin_url?>/img/new.png) no-repeat 0px 0px;overflow:hidden}
.bott1_thumb_front {z-index:1;position:absolute;top:0;left:0;width:<?=$thumb_width?>px;height:<?=$thumb_height?>px;overflow:hidden;cursor:pointer}
.bott1_thumb_back {width:<?=$thumb_width?>px;height:<?=$thumb_height?>px;overflow:hidden}
.bott1_thumb_subject {display:block;padding: 2px 0 !important;width:<?=$thumb_width?>px;font-size:14px;overflow:hidden;margin:150px}
.bott1_thumb_subject:link,
.bott1_thumb_subject:visited,
.bott1_thumb_subject:active {display:block;color:#fff;font-size:0.95em;text-decoration:none;white-space:nowrap}
.bott1_thumb_subject:hover {color:#fda850}
.bott1_thumb_content {display:block;padding: 2px 0 !important;width:<?=$thumb_width?>px;font-size:13px;overflow:hidden;margin-bottom:1px}
.bott1_thumb_content :link,
.bott1_thumb_content :visited,
.bott1_thumb_content :active {display:block;color:#fda850;font-size:0.95em;text-decoration:none;white-space:nowrap}
.bott1_thumb_content :hover {color:#fda850}
.bott1_no_list {padding-top:10px;height:<?=$thumb_height?>px;color:#777;text-align:center}
.bott1_more {position:absolute;top:30px;right:50px; }
.bott1_more :active {color:#555;text-decoration:none}
.bott1_more a:link {}
.bott1_more a:visited {color:#555;text-decoration:none}
.contt {
position: relative;
margin: auto;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
border-radius: 10%;
overflow: hidden;
cursor: pointer;
}
.contt .overlayt {
background: rgba(0, 0, 0, .5);
position: absolute;
margin: auto;
width: 0px;
height: 0px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
border-radius: 10%;
opacity: 0;
-webkit-transition: .4s ease;
transition: .4s ease;
}
.contt:hover .overlayt {
opacity: 1;
width: 100%;
height: 100%;
}
.overlayt span {
color: #fff;
text-align: center;
position: absolute;
margin: auto;
width: 140px;
height: 60px;
left: 0;
top: 30px;
right: 0;
bottom: 0;
opacity: 0;
}
.contt:hover .overlayt span {
opacity: 1;
-webkit-transition: 1.3s ease;
transition: 1.3s ease;
}
</style>
<div class="bott1_img_thumb">
<strong class="bott1_title"><a href="<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>"><?php echo $bo_subject; ?></a></strong>
<div class="bott1_thumb">
<? if (!count($list) == 0) { ?>
<ul>
<?
for ($i = 0; $i < count($list); $i++) {
$noimg = $latest_skin_url.'/img/_noimg.gif';
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height);
if($thumb['src']) {
$img_src = $thumb['src'];
} else {
$img_src = $noimg;
}
$img_alt = $thumb['alt'];
if($i>0 && ($i%$set_value[2]) == ($set_value[2] - 1)) {
$li_class = '';
} else {
$li_class = ' class="contt"';
}
?>
<li <?=$li_class?>>
<a href="<?=$list[$i]['href'] ?>">
<img src="<?= $img_src?>" alt="<?=$img_alt?>" width="<?= $thumb_width?>" height="<?= $thumb_height?>" class="bott1_thumb_back">
<span class="overlayt">
<span class="bott1_thumb_subject"><?=$list[$i]['subject'] ?></span>
</span>
</a>
</li>
<? } ?>
</ul>
<? } else { ?>
<p class="bott1_no_list">게시물이 없습니다.</p>
<? } ?>
</div>
</div>
설치까지 해보니 잘 돌아가더라구요. 이걸 위쪽 제가 쓰는 최근게시물 쪽에 입히고 싶은데 방법이 없을까요? css 부분만 따오면 되지 않을까 해서 해봤더니 실패...
어렵지 않다면 도와주시면 감사하겠습니다. 그리고 아래 코드는 내용이 아니라 제목이 출력되게끔 되어있는데요 내용으로 출력하는 방식으로 변경해주시면 더 감사하겠습니다!
답변 1
php
<article class="paper-edge2 flexbox">
<?php
for ($i=0; $i<$list_count; $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
if($thumb['src']) {
$img = $thumb['src'];
} else {
$img = G5_IMG_URL.'/no_img.png';
$thumb['alt'] = '이미지가 없습니다.';
}
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
echo "<div class='box'>";
echo "<div class='imageBx'>";
echo "<a href='". $list[$i]['href']. "'>". $img_content. "</a>".PHP_EOL;
//echo $img_content;
echo "</div>".PHP_EOL;
echo "<div class='contentBx'>";
//echo "<h2>". $list[$i]['subject']. "</h2>"; //제목
echo "<p>". cut_str($list[$i]['wr_content'], 30). "</p>"; //내용
echo "</div>";
echo "</div>";
}
if ($list_count == 0) { echo "게시물이 없습니다.";}
?>
</article>
css
@charset "utf-8";
.flexbox{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
/*align-items: space-between;*/
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.paper-edge2{
}
.paper-edge2 .box{
width: 210px;
height: 150px;
padding: 10px;
border: 1px solid #ddd;
background-size: cover;
background-clip: content-box;
background-color: #eeeef0;
box-sizing: border-box;
position: relative;
margin: 10px;
text-align: center;
/*margin-bottom: 10px;*/
}
.paper-edge2 .box:after {
content: "";
display: block;
position: absolute;
border: 50px solid transparent;
border-bottom: 50px solid #fefefe;
bottom: -60px;
right: -65px;
box-shadow: 0px 7px 6px -9px black;
transform: rotate(135deg);
}
.paper-edge2 .box:before {
content: "";
display: block;
position: absolute;
border: 50px solid transparent;
border-top: 50px solid #fefefe;
top: -60px;
left: -65px;
box-shadow: 0px -7px 6px -9px black;
transform: rotate(135deg);
}
.paper-edge2 .box img{
width: 100%;
height: 100%;
}
.paper-edge2 .wrap{
}
.paper-edge2 .wrap p{
clear: both;
/*border: 1px solid red;*/
margin: 15px 0px 10px 0px;
}
.paper-edge2 .box .contentBx {
position: absolute;
top: 50%;
left: 50px;
right: 50px;
background: #fff;
transform: translateZ(20px) scaleY(0);
padding: 10px 15px;
trnsform-origin: top;
transition: 0.5s;
transform-style: preserve-3d;
}
.paper-edge2 .box:hover .contentBx {
transform: translateZ(50px) scaleY(1);
}
답변을 작성하시기 전에 로그인 해주세요.
