Делайте бабок, делайте дедок, в моем сердце каждый будет лучшим<3

Подпись автора

"Let's get mischievous" Рисунок © Altaera, аватар (и персонаж) от femboy unicorn's rest

Тогда много вселенных с разным Львином...

Подпись автора

Дымолап
ой что за красавчик.....
куда путь держим?

Дымолап
вроде нет кстати

Сежу... Дописать бы анкетку, но я не дома

Голубика, я обращусь к голубике в своем будущем посте на поляне? лист всё-таки курировал её и с глазами, и с котятами, и захочет чёт сказать касательно ситуации со смертью стрижа

Ну вот, шутку сломали хд

Подпись автора

Я глупый или я действительно не могу делать новую тему в анкетах...

Ледосвет
Спасибо, держи ещё анкету ахах

Блик, html, css, пара часов свободного времени %)

Блик, да можно даже скрипт вставить, если он не громоздкий.
Да и там нечего показывать х) С таким же успехом можно погуглить "css текст при наведении на картинку" и выбрать любой понравившийся

[html]<style>
.image-parlax{
  width: 50%; /* Ширина изображения */
  cursor: pointer;
}
.image-container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.front-side, .back-side{
  background-size: cover;
  background-position: center;
  min-height: 350px; /* Высота изображения */
  height: auto;
  border-radius: 50%; /* Скругление углов */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}
.back-side{
  background: #343434;
  background: -webkit-linear-gradient(45deg,  #343434 0%,#000000 100%);
  background: -o-linear-gradient(45deg,  #343434 0%,#000000 100%);
  background: linear-gradient(45deg,  #343434 0%,#000000 100%);
}
.front-side:after{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  opacity: .6;
  background-color: #000;
  -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  border-radius: 50%; /* Скругление углов */
}
.image-container:hover .front-side,
.image-container:hover .back-side{
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back-side{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.inner{
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
            box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
            perspective: inherit;
  z-index: 2;
}
.image-container .back-side{
  -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.image-container .front-side{
  -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.image-container:hover .back-side{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.image-container:hover .front-side{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.front-side .inner p{
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}
.front-side .inner p:after{
  content: '';
  width: 4rem;
  height: 1px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}
.front-side .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}</style>

<div class="image-parlax" ontouchstart="this.classList.toggle('hover');">
  <div class="image-container">
    <div class="front-side" style="background-image: url(https://forumstatic.ru/files/001a/f4/24/47437.png)">
      <div class="inner">
        <p>и правда работает</p>
        <span>вау</span>
      </div>
    </div>
    <div class="back-side">
      <div class="inner">
        <p>ого</p>
      </div>
    </div>
  </div>
</div>[/html]

Подпись автора

Блик, привет :з

У меня уже готова анкетка на воилку в небо...

Добавлено спустя 1 минуту 27 секунд:
осталось только нажать кнопочку "отправить"...

Отредактировано Пустельга (2022-11-04 14:46:46)

[html]<div class="hover-text-one">
  <figure class="effect-text-three">
    <img src="https://forumupload.ru/uploads/001a/f4/24/588/t572344.jpg" alt=""/>
      <figcaption>
<h3>мама</h3>
<p>я программист</p>
      </figcaption>   
  </figure>
</div>
<style>
*, *:after, *:before {
border-box;
box-sizing: border-box;
}
.clearfix:before, .clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.hover-text-one {
overflow: hidden;
margin: 0;
width: 100%;
list-style: none;
text-align: center;
}
.hover-text-one figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
background: #527c82;
text-align: center;
cursor: pointer;
}
.hover-text-one figure img {
position: relative;
display: block;
min-height: 100%;
opacity: 1;
}
.hover-text-one figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hover-text-one figure figcaption::before,
.hover-text-one figure figcaption::after {
pointer-events: none;
}
.hover-text-one figure figcaption{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hover-text-one figure h3 {
word-spacing: -0.15em;
font-weight: 300;
}
.hover-text-one figure h3 span {
font-weight: 800;
}
.hover-text-one figure h3,
.hover-text-one figure p {
margin: 0;
}
.hover-text-one figure p {
letter-spacing: 1px;
font-size: 68.5%;
}

/* Эффект при наведении */
figure.effect-text-three {
background: #000000;
}
figure.effect-text-three img {
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transform: scale(1.1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.effect-text-three:hover img {
opacity: 0.4;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-text-three figcaption {
text-align: left;
}
figure.effect-text-three h3 {
position: relative;
overflow: hidden;
padding: 0.5em 0;
}
figure.effect-text-three h3::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
figure.effect-text-three:hover h3::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-text-three p {
padding: 1em 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
figure.effect-text-three:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
</style>
[/html]

Отредактировано Бурелапа (2022-11-04 16:58:27)