home big hovers

js/scripts.js

@@ -175,7 +175,7 @@
 			if (isHome || isArchive) {
 
 				//no overflowY
-				$('html').css({ overflowY: "hidden" })		
+				$('html').css({ overflowY: "hidden" })
 
 				//calculate wrappable elements
 				$('#content>*:not(.misha_loadmore)').addClass("hbox")
@@ -221,7 +221,7 @@
 				}
 
 				//add bottom scrollbar to div on bottom:
-				$(".home-wrapper-big .metadata").css({bottom: bottomScrollHeight})
+				$(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight })
 
 			}//isHome || isArchive end
 		}// !isMobile end
@@ -462,27 +462,43 @@
 		/* ------------------------------ hover on home ----------------------------- */
 
 		//hover on big articles
-		$(".home-big h2").hover(function () {
+		$(".home-big h2, .home-big .thumbnailwrapper").hover(function () {
 			let cc = $(this)
 			let cArticle = cc.parents("article")
+			let cMetadata = cArticle.children(".metadata")
 			//add hovered class
 			cArticle.addClass("hovered")
 			//add tag to header for bg
 			let artClasses = cArticle.attr("class").split(" ")
 			let theTag = findClassByStart(artClasses, "tag")
 			$("body, .header-1, .header-2").addClass("hover-" + theTag)
-			//show excerpt and alcim
-			cArticle.children(".metadata").children(".alcim").show()
-			cArticle.children(".metadata").children(".bevezeto").show()
+
+			//animate border
+			cMetadata.stop().animate({ height: "25rem" }, _ => {
+				//hide metadata
+				cMetadata.children(".categories, .postedon").hide()
+				cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
+			})
 
 		}, function () {
 			let cc = $(this)
+			let cArticle = cc.parents("article")
+			let cMetadata = cArticle.children(".metadata")
 			//remove hovered class
-			cc.parents("article").removeClass("hovered")
+			cArticle.removeClass("hovered")
 			//remove tag from header and body
 			let headerClasses = $(".header-1").attr("class").split(" ")
 			var hoverClass = findClassByStart(headerClasses, "hover")
 			$("body, .header-1, .header-2").removeClass(hoverClass)
+			//transparent metadata
+			cMetadata.children(".alcim, .bevezeto").addClass("transparent")
+			//animate height change
+			cMetadata.stop().animate({ height: "10rem" }, _ => {
+				//hide and show metadata
+				cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
+				cMetadata.children(".categories, .postedon").show()
+			})
+
 		})