css : hover

미니프로젝트(https://seonghoon90.github.io/Turkey/) 중
이미 내가 해야 할 일, 엉성하지만 제 기능을 완성은 했고, 잘 돌아가고, 떠오르는 아이디어는 구현하기에 너무 막막하고, 뭔가 해야겠다 싶어 내 시선이 향한 곳은 css.
웹페이지에서 이미지에 커서를 올리면 스르르~ 하고 사라지는 효과정도는 넣어보고 싶다. 라고 생각해서 내가 구글 검색창에 입력한 문자열.
"html 이미지 스르르"
그러자 바로 최상단에 위치한 css 코드가 hover 였다.

.card-img-top {
            border-radius: 10px;
            transition: 1s;
        }

.card-img-top:hover {
            opacity: 0.5;
        }

이렇게 적어도 작동했다.

./요소/ {
	transition: /시간(초)/; //효과까지 도달하는데 걸리는 시간
}

./요소/:hover {
	/적용하고 싶은 효과/
}

인 것 같다. 유용할 것 같다.