Google+ Followers

Будь в курсе событий!

02.03.2014

CSS3 Рекомендуемые сообщения виджет, с эффектом увеличения картинки

1 comment



Совсем отвлекся я с этими событиями в мире от написания постов,статей.Но все таки пересилив себя) решил  рассказать, и показать о новых приблудах для блогспот, блоггер. И именно,сегодня друзья рассказ мой будет о интересном виджете для блога CSS3 Рекомендуемые сообщения с зумом. Чем же виджет этот хорош, ну прежде всего своей необычностью, а именно что в нем можно добавлять свои картинки какие хотите, и ссылки. И при наведении на него, окошко у вас будет увеличиваться очень удобно и красиво. А помимо гото вставить в виджет можно ссылки как от постов, так и рекламу, или например реферальную ссылку. И люди которые зашли к вам на веб ресурс, обязательно обратят на него свое внимание.Работает он просто вы наводите мышкой на него, и жмете и вас перекидывает на любую страницу вашего ресурса, или же какого либо сайта расположенного в интернете.Для его установки нам потребуется зайти в наш блог, нажать  справа на панели меню дизайн, далее добавить гаджет в списке ищем HTMLjavascript и вставляем тот код который я наримую) ниже. Но его надо предварительно обработать а именно вписать в него свои адреса картинок,заголовок сообщения что будет выводиться,далее сообщение для нашей картинки, потом адес ссылки,  в описание я помечу в коде те места в которых надо все это разместить. Read More -- можно заменить на слово Подробнее, ну а можно не менять.



    <div id='background'>
    <table>
      <tr><td>
      <div class='view view-first'>
                        <img src='Тут вставляем нашу ссылку на изображение'/>
                        <div class='mask'>
                            <h2>Тут вставляем заголовок, к нашему сообщению</h2>
                          <p>Тут же вставляем сообщение к нашей картинке </p>
                            <a class='info' href='А тут надо вставить нашу ссылку, на какой либо ресурс'>Read More</a>
                        </div>
                    </div>  </td>
    
     <td> <div class='view view-first'>
                        <img src='Тут вставляем нашу ссылку на изображение'/>
                        <div class='mask'>
                            <h2>Тут вставляем заголовок, к нашему сообщению </h2>
                            <p>Тут же вставляем сообщение к нашей картинке </p>
                            <a class='info' href='А тут надо вставить нашу ссылку, на какой либо ресурс'>Read More</a>
                        </div>
                    </div> 
       </td> <td>
    <div class='view view-first'>
                        <img src='Тут вставляем нашу ссылку на изображение'/>
                        <div class='mask'>
                            <h2>Тут вставляем заголовок, к нашему сообщению </h2>
                            <p>Тут же вставляем сообщение к нашей картинке </p>
                            <a class='info' href='А тут надо вставить нашу ссылку, на какой либо ресурс'>Read More</a>
                        </div>
         
        </div> 
      </td>
      </tr>
      <tr>
        <td>
          <div class='view view-first'>
                        <img src='Тут вставляем нашу ссылку на изображение'/>
                        <div class='mask'>
                            <h2>Тут вставляем заголовок, к нашему сообщению  </h2>
                            <p>Тут же вставляем сообщение к нашей картинке </p>
                            <a class='info' href='А тут надо вставить нашу ссылку, на какой либо ресурс'>Read More</a>
                        </div>
         
        </div>
         
         
        </td>
        <td>
         
          <div class='view view-first'>
                        <img src='Тут вставляем нашу ссылку на изображение'/>
                        <div class='mask'>
                            <h2>Тут вставляем заголовок, к нашему сообщению  </h2>
                            <p>Тут же вставляем сообщение к нашей картинке h</p>
                            <a class='info' href='А тут надо вставить нашу ссылку, на какой либо ресурс'>Read More</a>
                        </div></div>
         
        </td> 
           
            <td>
              <div class='view view-first'>
                        <img src='Тут вставляем нашу ссылку на изображение '/>
                        <div class='mask'>
                            <h2>Тут вставляем заголовок, к нашему сообщению  </h2>
                            <p>Тут же вставляем сообщение к нашей картинке </p>
                            <a class='info' href='А тут надо вставить нашу ссылку, на какой либо ресурс'>Read More</a>
                        </div>
              </div>
             
              <p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right;padding-top:0px;"><a style="color:#D3D3D3;" href="http://www.zarnakoom.com">widgets</a></p>
             
             
            </td>
                     
       
      </tr>
     
     
    </table>
    </div>
    </div>
    <style>
     
    #background {

    background: #FAF8CC; width:100%; border: 1px solid #C9C299;
    }
     
    .view-first img {
       -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
       -ms-transition: all 0.2s linear;
       transition: all 0.2s linear;
    }
    .view-first .mask {
       -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
       filter: alpha(opacity=0);
       opacity: 0;
       background-color: rgba(219,127,8, 0.7);
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       -o-transition: all 0.4s ease-in-out;
       -ms-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    .view-first h2 {
       -webkit-transform: translateY(-100px);
       -moz-transform: translateY(-100px);
       -o-transform: translateY(-100px);
       -ms-transform: translateY(-100px);
       transform: translateY(-100px);
       -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
       -ms-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
    }
    .view-first p {
       -webkit-transform: translateY(100px);
       -moz-transform: translateY(100px);
       -o-transform: translateY(100px);
       -ms-transform: translateY(100px);
       transform: translateY(100px);
       -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
       -ms-transition: all 0.2s linear;
       transition: all 0.2s linear;
    }
    .view-first:hover img {
       -webkit-transform: scale(1.1,1.1);
       -moz-transform: scale(1.1,1.1);
       -o-transform: scale(1.1,1.1);
       -ms-transform: scale(1.1,1.1);
       transform: scale(1.1,1.1);
    }
    .view-first a.info {
       -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
       -ms-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
    }
    .view-first:hover .mask {
       -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
       filter: alpha(opacity=100);
       opacity: 1;
    }
    .view-first:hover h2,
    .view-first:hover p,
    .view-first:hover a.info {
       -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
       filter: alpha(opacity=100);
       opacity: 1;
       -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
       -o-transform: translateY(0px);
       -ms-transform: translateY(0px);
       transform: translateY(0px);
    }
    .view-first:hover p {
       -webkit-transition-delay: 0.1s;
       -moz-transition-delay: 0.1s;
       -o-transition-delay: 0.1s;
       -ms-transition-delay: 0.1s;
       transition-delay: 0.1s;
    }
    .view-first:hover a.info {
       -webkit-transition-delay: 0.2s;
       -moz-transition-delay: 0.2s;
       -o-transition-delay: 0.2s;
       -ms-transition-delay: 0.2s;
       transition-delay: 0.2s;
    }
            .view {
       width: 300px;
       height: 200px;
       margin: 10px;
     
       border: 2px solid #000000;
       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;
       background: #fff url(../images/bgimg.jpg) no-repeat center center;
    }
    .view .mask,.view .content {
       width: 300px;
       height: 200px;
       position: absolute;
       overflow: hidden;
       top: 0;
       left: 0;
    }
    .view img {
       display: block;
       position: relative;
    }
    .view h2 {
       text-transform: uppercase;
       color: #fff;
       text-align: center;
       position: relative;
       font-size: 17px;
       padding: 10px;
       background: rgba(0, 0, 0, 0.8);
       margin: 8px 0 0 0;
    }
    .view p {
       font-family: Georgia, serif;
       font-style: italic;
       font-size: 12px;
       position: relative;
       color: #fff;
       padding: 10px 20px 20px;
       text-align: center;
    }
    .view a.info {
       display: inline-block;
       text-decoration: none;
       padding: 5px 40px ;
       background: #000;
       color: #fff;
       text-transform: uppercase;
       -webkit-box-shadow: 0 0 1px #000;
       -moz-box-shadow: 0 0 1px #000;
       box-shadow: 0 0 1px #000;
    }
    .view a.info: hover {
       -webkit-box-shadow: 0 0 5px #000;
       -moz-box-shadow: 0 0 5px #000;
       box-shadow: 0 0 5px #000;
    }
     
    </style>


Дополнительные блоки можно добавить, или удалить добавив или удалив вот этот кусок кода.

</td> 
           
            <td>
              <div class='view view-first'>
                        <img src='Тут вставляем нашу ссылку на изображение '/>
                        <div class='mask'>
                            <h2>Тут вставляем заголовок, к нашему сообщению  </h2>
                            <p>Тут же вставляем сообщение к нашей картинке </p>
                            <a class='info' href='А тут надо вставить нашу ссылку, на какой либо ресурс'>Read More</a>
                        </div>
              </div>

1 комментарий :

  1. А как можно уменьшить этот виджет?просто он громаден для меня

    ОтветитьУдалить

© 2012-2017 Cash's from program