[script] 리스트 영역 클릭했을 때 넓어지는 효과

 

 

해당 영역 클릭 했을 때

영역 배경이 밝아지면서 width값 넓어지고,

하단 border, sub_txt 가 보여지는 효과.

 

$(document).ready(function(){
  $('.s1_slide > li').click(function(){
    $(this).addClass('on');
    $('.s1_slide > li').not(this).removeClass('on');
  });	
});

<div class="event_effect01">
  <ul class="s1_slide">
    <li class="list1 on">
      <h3 class="t_txt">carina</h3>
      <p class="s_txt">티스토리 블로그</p>
      <img src="//image5.compuzone.co.kr/img/images/customer/cst2020/cst_icon6.png">
    </li>
    <li class="list2">
      <h3 class="t_txt">carina</h3>
      <p class="s_txt">클릭했을때 아래 아래 화살표 사라짐~~</p>
      <img src="//image5.compuzone.co.kr/img/images/customer/cst2020/cst_icon6.png">
    </li>
    <li class="list3">
      <h3 class="t_txt">carina</h3>
      <p class="s_txt">border 왼 -> 오~~</p>
      <img src="//image5.compuzone.co.kr/img/images/customer/cst2020/cst_icon6.png">
    </li>
    <li class="list4">
      <h3 class="t_txt">carina</h3>
      <p class="s_txt">클릭했을때 가로 넓어지면서 배경색 opacity 조절해서 밝아짐~~</p>
      <img src="//image5.compuzone.co.kr/img/images/customer/cst2020/cst_icon6.png ">
    </li>	
  </ul> 
</div>

.s1_slide{width:100%; height:410px; box-sizing:border-box; }
.s1_slide:after{content:""; display:table; clear:both;}
.s1_slide li{position:relative; float:left; padding:35px 40px; width:200px; height:100%; transition:all 0.3s; cursor:pointer; box-sizing:border-box;}
.s1_slide li:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:1; transition:all 0.3s;}
.s1_slide li.list1{background-color:aquamarine;}
.s1_slide li.list2{background-color:cadetblue;}
.s1_slide li.list3{background-color:cornflowerblue;}
.s1_slide li.list4{background-color:darkcyan;}
.s1_slide li .t_txt{position:relative; padding-bottom:22px; color:#fff; font-size:22px; line-height:1.5; font-weight:normal;}
.s1_slide li .t_txt:before{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:rgba(255,255,255,.3); transition:all 0.3s;}
.s1_slide li .s_txt{opacity:0; margin-top:35px; width:100%; color:#fff; font-size:15px; line-height:1.8; }
.s1_slide li img{position:absolute; left:40px; bottom:40px; opacity:1; transition:all 0.3s;}
/* class on 추가됐을 때 css*/
.s1_slide li.on{width:600px; }
.s1_slide li.on:before{content:""; opacity:0; transition:all 0.3s;}
.s1_slide li.on .t_txt:before{width:100%; transition:all 0.3s; }
.s1_slide li.on .s_txt{opacity:1;}
.s1_slide li.on img{opacity:0;}