BLOG ARTICLE hover | 2 ARTICLE FOUND

  1. 2017.10.28 HTML 만으로 마우스오버 구현하는 방법
  2. 2017.10.27 이미지 마우스 hover시 좌우 기울이기

HTML 만으로 마우스오버 구현하는 방법

Html 2017. 10. 28. 13:20
반응형

[URL링크시]

<a href="#" onMouseOver="this.innerHTML='마우스오버시 변경되는 텍스트'" onMouseOut="this.innerHTML='마우스가 범위를 벗어날시 변경되는 텍스트'">기본적으로 표시되는 텍스트</a>
a href = "#": 누를시 이동되는 주소를 작성하면 됩니다.  
 
[이미지 링크시]
<img src="기본이미지주소" onmouseover="this.src='마우스올렸을때 바뀔이미지주소'" onmouseout="this.src='기본이미지주소'" border="0">
반응형
AND

이미지 마우스 hover시 좌우 기울이기

Html 2017. 10. 27. 21:17
반응형

아래의 이미지와 같이 마우스 hover시 좌우로 기울이는 코드

 

 

img { border:1px solid #D4D4D4; padding:5px; }
img:hover{ border:1px solid #666666; filter:alpha(opacity=70); opacity:.7; box-shadow:0 0 10px rgba(0,0,0,.2);filter:alpha(opacity=100);opacity:1; -ms-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg);transition:opacity .3s;-webkit-transition:opacity .3s;transition:opacity .3s; }

 

- box-shadow:0 0 10px -- 그림자의 확산

- -ms-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg) -- 기울기수치

반응형
AND



티스토리툴바