.middleContainer:Hover { -webkit-transform: rotateY(0deg); } .middleContainer:Hover .middleArtTitle { -webkit-transform: rotateY(0deg); -webkit-box-shadow: 3px 5px 10px #000; } .middleArtTitle { background: radial-gradient(ellipse at center, #992b00 2%,#1c0404 100%,#000000 100%) ; /* border: 10px solid #fcfafa; */ -moz-box-shadow: 0 20px 40px #888; -webkit-box-shadow: -3px 3px 7px #000; -webkit-backface-visibility: visible; -webkit-transform-origin: 31% 68%; -webkit-transform: perspective(250px) ; -moz-transform-origin: 31% 68%; -moz-transform: perspective(250px) rotate(-4deg); -o-transform-origin: 31% 68%; -o-transform: perspective(250px) rotate(-4deg); margin-bottom: -26px; margin-top: 26px; margin-left: -4px; margin-right: -2px; border-radius: 30px; -webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; } img.featuredImage { border-radius: 10px 30px 0px 0px; border-color: #333333 ; box-shadow: 5px 5px 5px #000; } .middleContainer:Hover .middleArtDate { -webkit-transform: rotateY(0deg); -webkit-box-shadow: 3px 5px 10px #000; } .middleArtDate { -webkit-box-shadow: 5px 5px 8px #000; background: linear-gradient(to bottom, #1c0404 0%,#992b00 100%) ; /* Old browsers */ /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */ -webkit-backface-visibility: visible; -webkit-transform-origin: 31% 68%; -webkit-transform: perspective(250px) skew(8deg); -moz-transform-origin: 31% 68%; -moz-transform: perspective(250px) rotate(8deg)skew(8deg); -o-transform-origin: 31% 68%; -o-transform: perspective(250px) rotate(8deg)skew(8deg); z-index: 3; margin-left: -5px; margin-right: 5px; margin-top: -3px; margin-bottom: 3px; border-radius: 30px; -webkit-transition-duration: 0.5s; } img.featuredImage:hover { } .middleContainer { -webkit-backface-visibility: visible; -webkit-transform-origin: 31% 68%; -webkit-transform: perspective(250px) rotateY(13deg); -moz-transform-origin: 31% 68%; -moz-transform: perspective(250px) rotateY(13deg); -o-transform-origin: 31% 68%; -o-transform: perspective(250px) rotateY(13deg); -webkit-transition-property: transform; -webkit-transition-duration: 0.5s; margin: 1px; }