Масштаб Переход гиперссылки не работает

Question

Я хотел бы сделать масштабный переход моего изображения, содержащегося в гиперссылке. Все это содержится в div. Я что-то написал, но это не работает. Мне нужно, чтобы изображение было гиперссылкой, потому что оно должно перенаправить пользователя на другую страницу.

Jsfiddle

#logoemailcol { 
 
    position: relative; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
#logoemailcol:hover #logoem { 
 
    -webkit-transform: scale(1.15); 
 
    transform: scale(1.15); 
 
}

<div id="logoemailcol"> 
 
    <a href="" id="logoem" target="_blank"> 
 
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;"> 
 
    </a> 
 
</div>

Answer 1

Это не работает, как ожидалось, потому что элемент анкер inline по умолчанию, и в соответствии со спецификацией, элемент должен быть блок-уровня или атомный элемент инлайн-уровня для того, "transformable".

Поэтому вам нужно будет изменить display элемента на inline-block или block, чтобы он работал должным образом. При этом значение inline-block отображает элементы как atomic inline-level element, поэтому элементы становятся "transformable" по определению.

Updated Example

#logoemailcol { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
#logoemailcol:hover #logoem { 
 
    transform: scale(1.15); 
 
} 
 
#logoem { 
 
    display: inline-block; 
 
    transition: all 0.5s; 
 
}

<div id="logoemailcol"> 
 
    <a href="" id="logoem" target="_blank"> 
 
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;"> 
 
    </a> 
 
</div>

Конечно, вы можете также применить преобразование к родительскому элементу, так как это block уровень, тем не менее, я просто предоставляя повод, чтобы почему это WASN работа для анкерного элемента.

Для справки:

CSS Transforms Module Level 1 - Terminology - Transformable Element

трансформируемой элемент является элементом одной из следующих категорий:

• элемент, чьё расположение определяется с помощью модели CSS коробка, которая либо a block-level или atomic inline-level element, или чей display property вычисляет таблицу-таблицу, таблицу-строку-группу, таблицу-заголовок-группу, таблицу-нижний колонтитул, таблицу-ячейку или заголовок таблицы
• элемент в пространстве имен SVG и не управляется моделью окна CSS, которая имеет атрибуты transform, 'patternTransform' или gradientTransform.

Answer 2

Вы хотите масштабировать и переход изображения.

#logoemailcol{ 
 
    position: relative; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 

 
#logoem img { 
 
    transition: all 0.5s; 
 
} 
 

 
#logoemailcol:hover #logoem img{ 
 
    -webkit-transform: scale(1.15); 
 
    transform: scale(1.15); 
 
}

<div id="logoemailcol"> 
 
    <a href="" id="logoem" target="_blank"><img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;"></a> 
 
</div>