0 Пользователей и 1 Гость просматривают эту тему.
  • 2 Ответов
  • 1654 Просмотров
*

igorvolg

  • Новичок
  • 2
  • 0 / 0
Вот сайт 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.
*

konoden

  • Захожу иногда
  • 326
  • 40 / 0
  • Поиск смысла жизни. Выполнено 15%...
Если код стилей рабочий, можете добавить его его в любой загружаемый на странице файл CSS.
Если хотите отдельным файлом подключать, то:
1) Сайт у Вас на WordPress, поэтому правим файл header.php вашей темы оформления
2) Нужно добавить в секцию <head> подключение файла кодом вида <link rel="stylesheet" type="text/css" href="mysite.css">
ссылка на файл и его имя должны соответстовать тем, что вы зададите.
Также можете использовать кондиционные теги ( http://codex.wordpress.org/Conditional_Tags ), заключить вывод файла в тег и подключать его только на главной странице, к примеру.
*

igorvolg

  • Новичок
  • 2
  • 0 / 0
Если код стилей рабочий, можете добавить его его в любой загружаемый на странице файл CSS.
Если хотите отдельным файлом подключать, то:
1) Сайт у Вас на WordPress, поэтому правим файл header.php вашей темы оформления
2) Нужно добавить в секцию <head> подключение файла кодом вида <link rel="stylesheet" type="text/css" href="mysite.css">
ссылка на файл и его имя должны соответстовать тем, что вы зададите.
Также можете использовать кондиционные теги ( http://codex.wordpress.org/Conditional_Tags ), заключить вывод файла в тег и подключать его только на главной странице, к примеру.

не получилось.
у меня в папке с эфaектом лежит opt_content.js, main.css, jpg, и test.html
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Нужен пример как присвоить свой стиль одному модулю

Автор nick71

Ответов: 21
Просмотров: 4442
Последний ответ 17.02.2018, 14:44:40
от cirip
Перенести стиль компонента в шаблон

Автор stparts

Ответов: 5
Просмотров: 562
Последний ответ 07.02.2018, 14:01:10
от stparts
Стиль для вышестоящего блока - HTML, CSS

Автор lalalag

Ответов: 6
Просмотров: 1722
Последний ответ 26.06.2017, 15:07:35
от Shustry
Свой стиль для placeholder

Автор kik84

Ответов: 2
Просмотров: 662
Последний ответ 22.11.2016, 16:04:10
от kik84
Стиль для всплывающего названия картинки- как?

Автор epson950

Ответов: 3
Просмотров: 790
Последний ответ 03.11.2016, 01:04:05
от AlekVolsk