Line 953: | Line 953: | ||
height: 32px; | height: 32px; | ||
width: 137px; | width: 137px; | ||
+ | } | ||
+ | |||
+ | .mydescription{ | ||
+ | height: 8em; | ||
+ | overflow: hidden; | ||
+ | cursor: pointer; | ||
+ | cursor: hand; /*IE callst it differently. */ | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .mydescription:hover{ | ||
+ | animation: expandCard 0.5s; | ||
+ | animation-fill-mode: forwards; | ||
+ | } | ||
+ | |||
+ | .mydescription:hover p { | ||
+ | background: initial; | ||
+ | -webkit-background-clip: initial; | ||
+ | -webkit-text-fill-color: initial; | ||
+ | } | ||
+ | |||
+ | .mydescription:hover .threeDots-container{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | @keyframes expandCard{ | ||
+ | to{ | ||
+ | height:15em; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .threeDots-container >img{ | ||
+ | height: auto; | ||
+ | width: 50px; | ||
+ | position: relative; | ||
+ | left: -50%; | ||
+ | top: -80%; | ||
+ | |||
+ | } | ||
+ | |||
+ | .threeDots-container{ | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 80%; | ||
+ | |||
+ | } /*The container is there to make sure the threeDots picture is centered and on to bottom of the container (mydescription). No idea how or why this works. */ | ||
+ | |||
+ | .mydescription >p{ | ||
+ | background: -webkit-linear-gradient(rgb(0,0,0),rgb(230,230,230) 50%, rgb(255,255,255)); | ||
+ | -webkit-background-clip: text; | ||
+ | -webkit-text-fill-color: transparent; | ||
+ | /*color: rgb(147,149,152);*/ | ||
+ | height: 15em; | ||
+ | } | ||
+ | |||
+ | .image > img{ | ||
+ | height: 200px !important; | ||
} | } | ||
Revision as of 11:03, 13 September 2017