Bymas | наложение картинки на картинку

Тема закрыта by

pyrokinesis
Причина: решено

вот хоу что бы при наведении на блок картинка наладивалась на картинку,

написал так:



 

 .card-vop a

 { 

 

 background: url("/style/themes/web/images/card-fon.png") no-repeat;

 background-size:contain;

 background-position:50% 100%;

 position:relative;

 display:block;

 border-radius:12px;

   background-color:#00C9A7;

   width: 220px;

   height:150px;

   margin: 15px;

   text-align: center;

   font-size: 13px;

   word-wrap: break-word;

   padding:20px;

 

 }

 

 

 

 .card-vop a:hover::after

 {

 content: url("/style/themes/web/images/moon.png");

  background-size:12px;

  width: 220px;

 height:150px;

 background-color:#4ED8CC;

 opacity:0.5;

 }

размер изображение изображения не хочет мменяться через background-size:12px;

спасиб помощи не дождешся (((

Не спеши, помогут, или обратись к https://bymas.ru/id1431 он может поможет, человек шарит в css

a:hover:after

КОТЭЙКА , у меня получилось только вот размер не хочет меняться ((( че за как хз

Ivlev (5 нояб 2022, в 18:03)
a:hover:after

я так делал, но изображение всеравно большое

Используй position а картинку маштабируй через width и height background-size:100% 100%
width:12px;
height:12px;

Ragnar Lodbrok (5 нояб 2022, в 19:22)
Используй position а картинку маштабируй через width и height background-size:100% 100%
width:12px;
height:12px;

я так уже пробовал ((

pyrokinesis ,



 .box {

 position: relative;

 width: 100px;

 height: 100px;

 background: url(...);

 }

 .box-2 {

 position: absolute;

 display: none;

 left: 50%;

 height: 50%;

 transform: translate(-50%, -50;

 width:12px;

 height:12px;

 background: url(...);

 background-size: 100% 100%;

 }

 .box-2:hover {

 display: block;

 }

<div class="box">

 <div class="box-2"></div>

 </div>

pyrokinesis , Всё правильно делал, но есть ошибочка, ссылочка на песочницу - codepen.io/andrey_lark/pen/MWXjyYw