How can i Overly featured image with another image ?

hi

i am starting a new website using msocial and it is a video site .

so , i've been trying to overly a play button image ( like in Youtube) over my featured image in the Homepage using css so the visitor know its a video .

i tried so hard and i searched in google but i can't succeeded to achieve what i want .

my site is : http://TheNewVid.com

thanks

Hi,

Try to add this code into css/override.css file (first enable this override option from Template Options -> Advanced tab).

Code: Select all

.frontpage article figure.featured-image:after {
background: transparent;
   background: rgba(0, 0, 0, .1);
   border: 3px solid #fff;
   border-radius: 50%;
   color: #fff;
   content: "\f0c1";
   cursor: pointer;
   font-family: FontAwesome;
   font-size: 48px;
   left: 50%;
   line-height: 100px;
   margin: -50px 0 0 -50px;
   opacity: 0;
   position: absolute;
   text-indent: 28px;
   top: 20%;
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
   width: 100px;
   z-index: 3;
   content: "\f04b";
   text-indent: 34px;
}

.frontpage article figure.featured-image:hover:after {
   opacity: 1;
   top: 40%;
}


hi

i did what you say but it still not working , not really .

i tried it on different Browsers and here is the result .

on Chrome and FireFox , it dose nothing and the hover zoom is working fine :



on internet explorer , it work but not good , as you see below it's not in the right place and also hover zoom not working ( when you hover the mouse over the thumbnail it zoomed ) :




one more thing , can i use an image not just an icon , something like this ( of-course with smaller icon ) :




for more details here my override.css file :

Code: Select all

/**
 *
 * -------------------------------------------
 * Override
 * -------------------------------------------
 *
 **/
 
#gk-mainbody-columns {
   background: #fff;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 50px 0 50px;
}
.frontpage #gk-mainbody article:first-child,
.frontpage #gk-mainbody article:nth-child(2) {
   padding-top: 52px;
}

.frontpage #gk-mainbody article:nth-child(2n+1) {
    border-right: none;
    clear: both;
    padding-right: 11px;
}

.frontpage #gk-mainbody article:nth-child(2n+2) {
   float: right;
   padding-left: 11px;
}

#gk-mainbody article > header {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0 0 23px 0px;
   position: relative;
   width: 100%;
}

#gk-mainbody article .content,
#gk-mainbody article .summary,
#gk-mainbody p.tags {
   padding-left: 0px;
}

#comments {
   margin-top: 48px;
   padding-left: 0px;
   position: relative;
}

.frontpage article figure.featured-image:hover img {
   -webkit-transform: scale(1.0);
   -moz-transform: scale(1.0);
   -ms-transform: scale(1.0);
   -o-transform: scale(1.0);
   transform: scale(1.2);
   opacity: 0.85;
}

#main-menu > li {
   clear: none!important;
   float: left;
   font-size: 18px;
   font-weight: bold;
   height: 62px;
   line-height: 63px;
   margin-left: 14px;
   text-transform: initial;
   width: auto;
}

#main-menu > li > a {
   color: #fff;
   display: block;
   height: 62px;
   line-height: 63px;
   padding: 0;
}

.header-container{
      width: 480px;
}
   
.header-left{
      width: 60px;
      float:left;
}
.header-right{
      width: 420px;
      float:right;
}

#gk-mainbody header h2 a{
   color: #000 !important;
   font-wight: bolder !important;
}

.frontpage article figure.featured-image:after {
background: transparent;
   background: rgba(0, 0, 0, .1);
   border: 3px solid #fff;
   border-radius: 50%;
   color: #fff;
   content: "\f0c1";
   cursor: pointer;
   font-family: FontAwesome;
   font-size: 48px;
   left: 50%;
   line-height: 100px;
   margin: -50px 0 0 -50px;
   opacity: 0;
   position: absolute;
   text-indent: 28px;
   top: 20%;
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
   width: 100px;
   z-index: 3;
   content: "\f04b";
   text-indent: 34px;
}

.frontpage article figure.featured-image:hover:after {
   opacity: 1;
   top: 40%;
}
/*
 *
 * 16. Override
 *
 *
------------------------------------ */

/* 16.1. Overrided elements
==================================== */

Thanks Alot for your help .

please clear your browser's cache. I've checked Firefox and Chrome and the result on hover is visible in the attachment.