css 관련 이미지 효과

현재접속자 최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    css 관련 이미지 효과

    QA

    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>

     

    #그누보드5

    이 질문에 댓글 쓰기 :

    답변 2

    곱등곱등 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    14.♡.♡.207

    원하시는 효과가 맞는지 모르겠지만 남겨 봅니다.

    <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>
    답변을 작성하시기 전에 로그인 해주세요.
    전체 0 | RSS
    QA 내용 검색
    • 개별 목록 구성 제목 답변작성자조회작성일
    • 질문이 없습니다.

    회원로그인

    인기태그
    #그누보드5(59577) #영카트5(16788) #php(14969) #그누보드4(10633) #게시판(3157) #javascript(2634) #그누보드(2345) #css(2043) #mysql(1509) #모바일(1271) #영카트(1270) #그누커머스(1178) #html(1098) #jquery(1013) #자바스크립트(936) #최신글(932) #DB(818) #로그인(793) #이미지(762) #여분필드(736)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT