Вот сайт
http://foto-fedor.net/ под слайдером квадратики которые изменяются,
а вот что заставляет их это делать
<div class="widget-front">
<?php if ( isset( $show_img) && $show_img == 1 ) : //check if image option is checked ?>
<div class="thumb-wrapper <?php if(!isset( $tc_thumb)) {echo 'tc-holder';} ?>">
<a class="
round_div" href="<?php echo $featured_page_link ?>" title="<?php echo $featured_page_title ?>"></a> это вот то что задает такой эффект скругления и увеличения сейчас.
<?php echo $tc_thumb; ?>
</div>
<?php endif; ?>
<h2><?php echo $featured_page_title ?></h2>
<p class="fp-text-<?php echo $area ?>"><?php echo $text; ?></p>
<p>
<a class="btn btn-primary fp-button" href="<?php echo $featured_page_link ?>" title="<?php echo $featured_page_title ?>">
<?php echo esc_attr(tc__f('__get_option' , 'tc_featured_page_button_text'))?>
</a>
</p>
</div><!-- /.widget-front -->
у меня есть следующий код
/* main.css*/
.banner_blo_side {
width:220px;
height:220px;
margin:0px 2% 25px 0px;
background: #000000 transparent; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-8 */
}
.camouf_animation {
margin: 1.5%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
}
.camouf_animation-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.camouf_animation-tenth .content_animat {
/*background: url(/bitrix/templates/camoufnew/images/tryapka.png) repeat;*/
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.camouf_animation-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
/* End */
который должен по идее увеличивать картинку на сайт при наведении курсора мышки.
так вот как мне подкрепить этот стиль CSS.
17.02.2018, 14:44:40