• Resolved micgillan

    (@micgillan)


    I am having a problem with the from the blog widget on my front page. The standard CCS does not display the text from the blog. I have modified the CCS to display the text. However, the text disappears after I hover over it. Any ideas or suggestions. My aim is to always display the text from the blog.

    Other-than this, I love the theme and enjoy using it.

    https://www.division.website500.com.au/”>

    Extract from my image-slider.css

    /*General Mosaic Styles*/
    .mosaic-block {
    	float:left;
    	position:relative;
    	overflow:hidden;
    	width:470px;
    	height:250px;
    	margin:10px;
    	background:transparent;
    	border:1px solid #F2EFEF;
    	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
    }
    
    	.mosaic-backdrop {
    		display:none;
    		position:absolute;
    		top:0;
    		height:100%;
    		width:100%;
    		background:transparent;
    	}
    
    	.mosaic-overlay {
    		display:none;
    		z-index:5;
    		position:absolute;
    		width:100%;
    		height:100%;
    		background:transparent;
    	}
    
    		/*** Custom Animation Styles (You can remove/add any styles below) ***/
    		.circle .mosaic-overlay {
    			background:url(../images/assets/hover-magnify.png) no-repeat center center;
    			opacity:1;
    			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    			display:none;
    		}
    
    		.fade .mosaic-overlay {
    			opacity: 1.00;
    			background:url(../images/assets/bg-burgundy.png);
    		}
    
    		.bar .mosaic-overlay {
    			bottom:-100px;
    			height:100px;
    			background:url(../images/assets/bg-blue.png);
    		}
    
    		.bar2 .mosaic-overlay {
    			bottom:-50px;
    			height:100px;
    			opacity:0.8;
    			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    		}
    
    			.bar2 .mosaic-overlay:hover {
    				opacity:1;
    				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    			}
    
    		.bar3 .mosaic-overlay {
    			top:-100px;
    			height:100px;
    			background:url(../images/assets/bg-black.png);
    		}
    		/*** End Animation Styles ***/
    
    .mosaic-block .details{
    	margin:15px 20px;
    }
    .mosaic-block h4{
    	line-height:160%;
    	color:#fff;
    	text-shadow:1px 1px 0 rgb(0,0,0);
    	margin-bottom: 20px;
    }
    .mosaic-block p{
    	color:#aaa;
    	text-shadow:1px 1px 0 rgb(0,0,0);
    	line-height: 1.5;
    }
    .mosaic-block a{
    	text-decoration:none;
    }
    
    #content-holder3 .mosaic-block h4 {
    	color: #ffffff !important;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author vpthemes

    (@vpthemes)

    To always display the text from the blog – add this code to style.css file:

    #from-blog li .mosaic-block a.mosaic-overlay {
    opacity: 1 !important;
    }

    Thread Starter micgillan

    (@micgillan)

    Thank you. Your a genius, the fix worked. The code now reads.

    /*General Mosaic Styles*/
    .mosaic-block {
    float:left;
    position:relative;
    overflow:hidden;
    width:470px;
    height:250px;
    margin:10px;
    background:transparent;
    border:1px solid #F2EFEF;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
    }

    .mosaic-backdrop {
    display:none;
    position:absolute;
    top:0;
    height:100%;
    width:100%;
    background:transparent;
    }

    .mosaic-overlay {
    display:none;
    z-index:5;
    position:absolute;
    width:100%;
    height:100%;
    background:transparent;
    }

    /*** Custom Animation Styles (You can remove/add any styles below) ***/
    .circle .mosaic-overlay {
    background:url(../images/assets/hover-magnify.png) no-repeat center center;
    opacity:1;
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    display:none;
    }

    .fade .mosaic-overlay {
    opacity: 1.00;
    background:url(../images/assets/bg-burgundy.png);
    }

    .bar .mosaic-overlay {
    bottom:-100px;
    height:100px;
    background:url(../images/assets/bg-blue.png);
    }

    .bar2 .mosaic-overlay {
    bottom:-50px;
    height:100px;
    opacity:0.8;
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
    }

    .bar2 .mosaic-overlay:hover {
    opacity:1;
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
    }

    .bar3 .mosaic-overlay {
    top:-100px;
    height:100px;
    background:url(../images/assets/bg-black.png);
    }
    /*** End Animation Styles ***/

    .mosaic-block .details{
    margin:15px 20px;
    }
    .mosaic-block h4{
    line-height:160%;
    color:#fff;
    text-shadow:1px 1px 0 rgb(0,0,0);
    margin-bottom: 20px;
    }
    .mosaic-block p{
    color:#aaa;
    text-shadow:1px 1px 0 rgb(0,0,0);
    line-height: 1.5;
    }
    .mosaic-block a{
    text-decoration:none;
    opacity: 1 !important;
    }

    #content-holder3 .mosaic-block h4 {
    color: #ffffff !important;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘From thr blog – front page’ is closed to new replies.