Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.10.2017, 14:42   #1
Hanigun
Новичок
Джуниор
 
Регистрация: 08.10.2017
Сообщений: 2
Восклицание Как сделать анимированную кнопку с картинкой

Добрый день. нужна кнопка с анимацией, внутри кнопки изображение, при наведении на кнопку картинка внутри приближается и немного вертится по оси. пример тут: http://demo.rockettheme.com/joomla-templates/anacron/ (знаю что это не кнопка а слайдер многофункциональный, но мне нужно сделать кнопку с ссылкой. а там ссылки не вставить)

Скриншот блока также прикрепил
Изображения
Тип файла: jpg 2017-10-08_14-40-27.jpg (56.3 Кб, 152 просмотров)
Hanigun вне форума Ответить с цитированием
Старый 08.10.2017, 15:03   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

это просто CSS.

transform: rotate(25deg)
и
scale.

https://www.w3schools.com/css/css3_2dtransforms.asp
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 08.10.2017, 15:14   #3
Hanigun
Новичок
Джуниор
 
Регистрация: 08.10.2017
Сообщений: 2
По умолчанию

да, но не знаю как сделать границы для картинки. чтобы при увеличении grow (как я понял) картинка урезалась
Hanigun вне форума Ответить с цитированием
Старый 08.10.2017, 15:41   #4
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

можно так.

Код:
<!DOCTYPE html>
<html lang="en-US">
<head>

    <title>Page-Title</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        
        #content{
            width: 100%; box-sizing: border-box; text-align: center; padding: 50px;
        }

        .link-block-wrapper{
            display: inline-block; width: 320px; height: 240px; box-shadow: 0 0 2px #555;    
            margin: 10px; overflow: hidden;
        }

        .link-block-image{
            width: 100%; height: 100%; display: block; background-size: 320px 240px !important;
        }

        .link-block-wrapper:hover > .link-block-image{
            transition: all 0.5s;
            transform:  scale(1.5) rotate(25deg);
            -moz-transform: scale(1.5) rotate(25deg);
            -webkit-transform: scale(1.5) rotate(25deg);
            background-position: -20px -20px;
        }

    </style>

</head>
<body>
<!-- ========================================================== -->

<div id="content">

    <a class="link-block-wrapper" href="#">
        <div class="link-block-image" style="background: url('960x720.jpg'); "></div> 
    </a>

    <a class="link-block-wrapper" href="#">
        <div class="link-block-image" style="background: url('960x720.jpg'); "></div> 
    </a>

    <a class="link-block-wrapper" href="#">
        <div class="link-block-image" style="background: url('960x720.jpg'); "></div> 
    </a>

</div> 

<!-- ========================================================== -->
</body>
</html>
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать так, что бы текст был рядом с картинкой Ilg@m HTML и CSS 1 19.02.2017 13:11
как сделать текст рядом с картинкой? twenty eight Помощь студентам 1 20.01.2016 19:51
Как в дельфи закинуть анимированную картинку? Argontarg Общие вопросы Delphi 6 27.01.2014 11:58
Как сделать таблицу НАД картинкой, а не под ней??? Proger16 HTML и CSS 5 28.04.2013 19:55
Как сделать таблицу НАД картинкой, а не под ней??? Proger16 HTML и CSS 2 14.04.2013 14:54