css 관련 이미지 효과
본문
먼저 해당 스킨 공개해 주신 컬러님께 대단히 감사합니다.
http://web.zc.bz/gnu5/?skin=color_css3_effect_pic10
해당 스킨 궁금사항이 좀 있어서요..
해당 스킨 먼저 글자 및 내용이 먼저 나오고 마우스에 올리면 이미지가
나오게끔 즉 거꾸로 구현 좀 하고 싶은데
소스를 어디를 어떻게 수정 해야 되는지요?
조언 좀 구합니다.
아무쪼록 추운 날씨에 건강 유의 하시길 바랍니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$img_w = 230; // 이미지($img) 가로 크기
$img_h = 230; // 이미지($img) 세로 크기
?>
<style type="text/css">
.bs-example {
width:1000px;
position: relative;
padding: 45px 15px 15px;
margin: 0 auto;
}
.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ih-item a {
color: #333;
}
.ih-item a:hover {
text-decoration: none;
}
.ih-item img {
width: 100%;
height: 100%;
}
.ih-item.circle {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%;
}
.ih-item.circle .img {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%;
}
.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
border-radius: 50%;
}
.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.square {
position: relative;
width: 316px;
height: 216px;
border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ih-item.square .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.circle.effect {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}
.ih-item.circle.effect .img {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.ih-item.circle.effect.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect .info {
background: #333333;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.35s ease-in-out 0.3s;
-moz-transition: all 0.35s ease-in-out 0.3s;
transition: all 0.35s ease-in-out 0.3s;
}
.ih-item.circle.effect .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 12px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect .info p {
color: #bbb;
padding: 10px 5px;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect a:hover .img {
opacity: 0;
visibility: hidden;
}
.ih-item.circle.effect a:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.circle.effect.left_to_right .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ih-item.circle.effect.left_to_right .info {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.ih-item.circle.effect.left_to_right a:hover .img {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.ih-item.circle.effect.left_to_right a:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
.ih-item.circle.effect.right_to_left .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.ih-item.circle.effect.right_to_left .info {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ih-item.circle.effect.right_to_left a:hover .img {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.ih-item.circle.effect.right_to_left a:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
.ih-item.circle.effect.top_to_bottom .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ih-item.circle.effect.top_to_bottom .info {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ih-item.circle.effect.top_to_bottom a:hover .img {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.ih-item.circle.effect.top_to_bottom a:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}
.ih-item.circle.effect.bottom_to_top .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ih-item.circle.effect.bottom_to_top .info {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ih-item.circle.effect.bottom_to_top a:hover .img {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.ih-item.circle.effect.bottom_to_top a:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}
.col-sm-6 {
float: left;
width: 25%;
height: 260px;
}
</style>
<link rel="stylesheet" type="text/css" href="<?=$latest_skin_url?>/css/normalize.css"/>
<div style="width:100%; margin:0 auto;">
<div class="bs-example">
<div class="row">
<?php
for($i=0; $i<count($list); $i++){
$thumbs = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $img_w, $img_h, false, true);
if($thumbs['src']) {
$img = $thumbs['src'];
}?>
<div class="col-sm-6">
<div class="ih-item circle effect left_to_right"><a href="<?=$list[$i]['href']?>">
<div class="img"><img src="<?=$img?>" alt="<?=$list[$i]['subject']?>"></div>
<div class="info">
<h3><?=$list[$i]['subject']?></h3>
<p><?php echo mb_strimwidth($list[$i]['wr_content'], '0', '75', '', 'utf-8');?></p>
</div>
</a></div>
</div>
<?}?>
</div>
</div>
</div>
!-->
답변 2
원하시는 효과가 맞는지 모르겠지만 남겨 봅니다.
<style> ~ </style> 통째로 바꿔주세요
<style type="text/css">
.bs-example {
width:1000px;
position:relative;
padding:45px 15px 15px;
margin:0 auto;
}
.ih-item {
position:relative;
-webkit-transition:all 0.35s ease-in-out;
-moz-transition:all 0.35s ease-in-out;
transition:all 0.35s ease-in-out;
}
.ih-item,.ih-item {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.ih-item a {
color:#333;
}
.ih-item a:hover {
text-decoration:none;
}
.ih-item img {
width:100%;
height:100%;
}
.ih-item.circle {
position:relative;
width:220px;
height:220px;
border-radius:50%;
}
.ih-item.circle .img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
border-radius:50%;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.ih-item.circle .img:before {
position:absolute;
display:block;
content:'';
width:100%;
height:100%;
border-radius:50%;
box-shadow:inset 0 0 0 16px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.3);
-webkit-transition:all 0.35s ease-in-out;
-moz-transition:all 0.35s ease-in-out;
transition:all 0.35s ease-in-out;
}
.ih-item.circle .img img {
border-radius:50%;
}
.ih-item.circle .info {
position:relative;
width:220px;
height:220px;
border-radius:50%;
}
.ih-item.square {
position:relative;
width:316px;
height:216px;
border:8px solid #fff;
box-shadow:1px 1px 3px rgba(0,0,0,0.3);
}
.ih-item.square .info {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.ih-item.circle.effect {
-webkit-perspective:900px;
-moz-perspective:900px;
perspective:900px;
}
.ih-item.circle.effect .img {
visibility:hidden;
opacity:0;
-webkit-transition:all 0.35s ease-in-out 0.3s;
-moz-transition:all 0.35s ease-in-out 0.3s;
transition:all 0.35s ease-in-out 0.3s;
}
.ih-item.circle.effect.colored .info {
background:#1a4a72;
}
.ih-item.circle.effect .info {
background:#333333;
visibility:visible;
opacity:1;
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
.ih-item.circle.effect .info h3 {
color:#fff;
text-transform:uppercase;
position:relative;
letter-spacing:2px;
font-size:12px;
margin:0 30px;
padding:55px 0 0 0;
height:110px;
text-shadow:0 0 1px white,0 1px 2px rgba(0,0,0,0.3);
}
.ih-item.circle.effect .info p {
color:#bbb;
padding:10px 5px;
margin:0 30px;
font-size:12px;
border-top:1px solid rgba(255,255,255,0.5);
}
.ih-item.circle.effect a:hover .img {
visibility:visible;
opacity:1;
}
.ih-item.circle.effect a:hover .info {
opacity:0;
visibility:hidden;
}
.ih-item.circle.effect.left_to_right .img {
-webkit-transform:rotateY(90deg);
-moz-transform:rotateY(90deg);
-ms-transform:rotateY(90deg);
-o-transform:rotateY(90deg);
transform:rotateY(90deg);
-webkit-transform-origin:0% 50%;
-moz-transform-origin:0% 50%;
-ms-transform-origin:0% 50%;
-o-transform-origin:0% 50%;
transform-origin:0% 50%;
}
.ih-item.circle.effect.left_to_right .info {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
-ms-transform:rotateY(0);
-o-transform:rotateY(0);
transform:rotateY(0);
-webkit-transform-origin:100% 50%;
-moz-transform-origin:100% 50%;
-ms-transform-origin:100% 50%;
-o-transform-origin:100% 50%;
transform-origin:100% 50%;
}
.ih-item.circle.effect.left_to_right a:hover .img {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
-ms-transform:rotateY(0);
-o-transform:rotateY(0);
transform:rotateY(0);
}
.ih-item.circle.effect.left_to_right a:hover .info {
-webkit-transform:rotateY(-90deg);
-moz-transform:rotateY(-90deg);
-ms-transform:rotateY(-90deg);
-o-transform:rotateY(-90deg);
transform:rotateY(-90deg);
}
.ih-item.circle.effect.right_to_left .img {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
-ms-transform:rotateY(0);
-o-transform:rotateY(0);
transform:rotateY(0);
-webkit-transform-origin:0% 50%;
-moz-transform-origin:0% 50%;
-ms-transform-origin:0% 50%;
-o-transform-origin:0% 50%;
transform-origin:0% 50%;
}
.ih-item.circle.effect.right_to_left .info {
-webkit-transform:rotateY(-90deg);
-moz-transform:rotateY(-90deg);
-ms-transform:rotateY(-90deg);
-o-transform:rotateY(-90deg);
transform:rotateY(-90deg);
-webkit-transform-origin:100% 50%;
-moz-transform-origin:100% 50%;
-ms-transform-origin:100% 50%;
-o-transform-origin:100% 50%;
transform-origin:100% 50%;
}
.ih-item.circle.effect.right_to_left a:hover .img {
-webkit-transform:rotateY(90deg);
-moz-transform:rotateY(90deg);
-ms-transform:rotateY(90deg);
-o-transform:rotateY(90deg);
transform:rotateY(90deg);
}
.ih-item.circle.effect.right_to_left a:hover .info {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
-ms-transform:rotateY(0);
-o-transform:rotateY(0);
transform:rotateY(0);
}
.ih-item.circle.effect.top_to_bottom .img {
-webkit-transform:rotateX(0);
-moz-transform:rotateX(0);
-ms-transform:rotateX(0);
-o-transform:rotateX(0);
transform:rotateX(0);
-webkit-transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
transform-origin:50% 100%;
}
.ih-item.circle.effect.top_to_bottom .info {
-webkit-transform:rotateX(-90deg);
-moz-transform:rotateX(-90deg);
-ms-transform:rotateX(-90deg);
-o-transform:rotateX(-90deg);
transform:rotateX(-90deg);
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
-ms-transform-origin:50% 0;
-o-transform-origin:50% 0;
transform-origin:50% 0;
}
.ih-item.circle.effect.top_to_bottom a:hover .img {
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
-ms-transform:rotateX(90deg);
-o-transform:rotateX(90deg);
transform:rotateX(90deg);
}
.ih-item.circle.effect.top_to_bottom a:hover .info {
-webkit-transform:rotateX(0);
-moz-transform:rotateX(0);
-ms-transform:rotateX(0);
-o-transform:rotateX(0);
transform:rotateX(0);
}
.ih-item.circle.effect.bottom_to_top .img {
-webkit-transform:rotateX(0);
-moz-transform:rotateX(0);
-ms-transform:rotateX(0);
-o-transform:rotateX(0);
transform:rotateX(0);
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
-ms-transform-origin:50% 0;
-o-transform-origin:50% 0;
transform-origin:50% 0;
}
.ih-item.circle.effect.bottom_to_top .info {
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
-ms-transform:rotateX(90deg);
-o-transform:rotateX(90deg);
transform:rotateX(90deg);
-webkit-transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
transform-origin:50% 100%;
}
.ih-item.circle.effect.bottom_to_top a:hover .img {
-webkit-transform:rotateX(-90deg);
-moz-transform:rotateX(-90deg);
-ms-transform:rotateX(-90deg);
-o-transform:rotateX(-90deg);
transform:rotateX(-90deg);
}
.ih-item.circle.effect.bottom_to_top a:hover .info {
-webkit-transform:rotateX(0);
-moz-transform:rotateX(0);
-ms-transform:rotateX(0);
-o-transform:rotateX(0);
transform:rotateX(0);
}
.col-sm-6 {
float:left;
width:25%;
height: 260px;
}
</style>
곱등곱등님 정말 감사합니다. ^^
답변을 작성하시기 전에 로그인 해주세요.