Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Adding Post Titles to Photo Overlay on Hover (TUMBLR)

    Looking for help regarding my Tumblr site.

    The site's index page has photos that when moused over, have a darkened overlay. I would like to code in my post titles to that overlay. I want viewers to be able to view what the post is about without clicking on the photo itself.

    My site is relatively bare, but see UltraFolio for reference.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    ...
    
    {block:IfHeadingsGoogleWebFont}<link rel="stylesheet" href="http://fonts.googleapis.com/css?family={text:Headings Google Web Font}:300,400,400italic,500,600,700,700italic">{/block:IfHeadingsGoogleWebFont}
    
    {block:IfBodyGoogleWebFont}<link rel="stylesheet" href="http://fonts.googleapis.com/css?family={text:Body Google Web Font}:400,400italic,500,600,700,700italic">{/block:IfBodyGoogleWebFont}
    
    <link rel="stylesheet" href="http://static.tumblr.com/ab9wqgz/6Jpmsm4h5/lightbox.css">
    
    <style type="text/css">
    
    /*      Settings        */
    
    html{
        background:{color:Background};
        -webkit-font-smoothing:antialiased;
        height:100%;
    	}
    
    body{
        height:100%;
        margin:0;
        font:14px {block:IfBodyGoogleWebFont}{text:Body Google Web Font}{/block:IfBodyGoogleWebFont}'Helvetica Neue', "Arial", sans-serif;
        {/block:IfBodyGoogleWebFont}
        color:{color:Body Text}
    	}
    
    *, *:before, *:after {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box
        }
    
    h1, h2, h3, h4, h5 {
        margin: 0 0 15px 0;
        font:700 1em {block:IfHeadingsGoogleWebFont}"{text:Headings Google Web Font}"{/block:IfHeadingsGoogleWebFont}'Helvetica Neue', "Arial", sans-serif
        }
    
    h1{font-size:30px}
    h2{font-size:26px}
    h3{font-size:22px}
    p{line-height:1.8em}
    
    {block:IndexPage}
    body { font-size: 16px; }
    {/block:IndexPage}
    
    
    
    a,a:hover{
        text-decoration:none
        }
    
    a:link,a:visited{
        color:{color:Links};
        text-decoration:none
         }
    
    a:hover,a:active {
        opacity:.6
        }
    
    h1 a,h2 a,h3 a,h4 a,h5 a{
        color:{color:Body Text} !important
        }
    
    blockquote{
        margin:5px 0 10px 15px;
        padding-left:10px;
        border-left:3px solid {color:Body Text};
        }
    
    a{
        -webkit-transition:all .3s linear;
        -moz-transition:all .3s linear;
        -o-transition:all .3s linear;
        -ms-transition:all .3s linear;
        transition:all .3s linear
        }
    
    .content .photo img{
        width:100%;
        display:block
        }
    
    #install-btn {
             position:fixed;
             bottom: 0px;
             right:6px;
             z-index: 99999;
         }
    
    /*      End-Settings        */
    
    /*      Header      */
    
    #header{
        position:relative;
        width:100%;
        height:100%;
        padding:50px 65px;
        background:{color:Cover} url("{image:Cover}") no-repeat center;
        background-size:cover
        }
    
    #header h1{
        display:inline;
        letter-spacing:-2px;
        font:700 24px "{text:Headings Google Web Font}"
        }
    
    #header h1 a{
        margin:0;
        color:{color:Blog Title} !important
        }
    
    #header #navigation{
        float:right;
        display:inline;
        margin:10px 0
        }
    
    #header #navigation li{
        display:inline;
        margin:0 0 0 30px
        }
    
    #header #navigation li a{
        font:700 13px "{text:Headings Google Web Font}";
        color:{color:Navigation Links}
        }
    
    #header #description{
        position:absolute;
        top:29%;
        left:50%;
        width:100%;
        max-width:670px;
        margin-left:-338px !important;
        text-align:center;
        font-size:30px;
        font-weight:300;
        color:{color:Description}
        }
    
    #header #description a.button{
        display:inline-block;
        padding:13px 20px;
        margin-top:40px;
        text-transform:uppercase;
        font:700 14px "{text:Headings Google Web Font}";
        background:{color:Hire Me Button Background};
        color:{color:Hire Me Button Text};
        border-radius:4px
        }
    
    #header #description a.button:hover{
        opacity:.8
        }
    
    /*      End-Header      */
    
    /*      Posts       */
    
    #posts-container{
        position:relative;
        padding:60px 0 30px 0;
        }
    
    #posts-container #category{
        text-align:center;
        padding:60px 0
        }
    
    h2.latest{
        text-align:center;
        font:400 20px/30px "{text:Headings Google Web Font}";
        color:{color:Portfolio Heading}
        }
    
    #filters {
        margin-bottom: 40px;
        text-align:center
    }
    
    #filters li{
        display:inline;
        margin:0 10px;
        list-style-type:none
        }
    
    #filters li a{
        font:700 13px "{text:Headings Google Web Font}";
        color:{color:Portfolio Categories}
        }
    
    #filters li a:active {
        font:700 13px "{text:Headings Google Web Font}";
        color:{color:Portfolio Heading}
        }
    
    #posts{
        width:1050px;
        margin:auto
        }
    
    #posts:after{ 
        content:" ";
        display:block; 
        height:0; 
        clear:both
        }
    
    .content{
        overflow:hidden;
        width:320px;
        height:240px;
        margin:0 15px 30px 15px;
        -webkit-transition:all .6s ease;
        -moz-transition:all .6s ease;
        -o-transition:all .6s ease;
        -ms-transition:all .6s ease;
        transition:all .6s ease
        }
    
    .content .photo-post{
        width:100%;
        height:100%;
        }
    
    {block:indexpage}
    .content .text-post{
        width:320px;
        height:240px;
        bottom:0;
        padding:30px;
        background:{color:Post Background}
        }
    
    .content .text-post a.post-overlay{
        position:absolute;
        width:100%;
        height:100px;
        bottom:0;
        z-index:30;
    background:-moz-linear-gradient(top,rgba({RGBcolor:Post Background},0) 0%,rgba({RGBcolor:Post Background},1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba({RGBcolor:Post Background},0)), color-stop(100%,rgba({RGBcolor:Post Background},1)));background:-webkit-linear-gradient(top,rgba({RGBcolor:Post Background},0) 0%,rgba({RGBcolor:Post Background},1) 100%);background:-o-linear-gradient(top,rgba({RGBcolor:Post Background},0) 0%,rgba({RGBcolor:Post Background},1) 100%);background:-ms-linear-gradient(top,rgba({RGBcolor:Post Background},0) 0%,rgba({RGBcolor:Post Background},1) 100%);background:linear-gradient(to bottom,rgba({RGBcolor:Post Background},0) 0%,rgba({RGBcolor:Post Background},1) 100%);
        opacity:1
        }
    
    {/block:indexpage}
    
    .content .captions{
        width:100%;
        display:block;
        }
    
    .content .photoset li{
        list-style-type:none;
        opacity:0
        }
    
    .content .photoset li:nth-child(2){
        opacity:1 !important
        }
    
    .content .photo{
        position:relative;
        width:100%;
        height:100%;
        }
    
    .content .photo .photo-background{
        position:absolute;
        width:100%;
        height:100%
        }
    
    .content a.overlay{
        z-index:29;
        position:absolute;
        width:100%;
        height:100%;
        background:#000;
        opacity:0
        }
    
    .content:hover a.overlay{
        opacity:.7
        }
    
    .content .media iframe{
        display:block;
        width:100%
        }
    
    ul.chat{
        list-style-type:none;
        margin:0;
        padding:0
        }
        
    .quote {
        font-size: 26px;
    }
    
    /*      End-Posts     */
    
    /*      Details     */
    
    /*      End-Details     */
    
    #pagination-container{
        height:132px;
        padding:30px 0 70px
        }
    
    #pagination-container #pagination{
        width:100%;
        text-align:center
        }
    
    #pagination-container #pagination a#more-projects{
        padding:8px 20px;
        cursor:pointer;
        text-transform:uppercase;
        font:700 12px "{text:Headings Google Web Font}";
        color:{color:Load More Text};
        background:{color:Load More Button};
        border-radius:3px;
        }
    
    footer{
        width:100%;
        padding:30px 70px;
        text-align:right;
        background:{color:Footer Background}
        }
    
    footer #credit{
        display:inline
        }
    
    footer #credit,
    footer #credit a{
        font:500 12px "{text:Headings Google Web Font}";
        color:{color:Footer Text}
        }
    
    .accessibility, .visuallyhidden {
        clip:rect(0 0 0 0) !important;
        position:absolute !important;
        width:1px !important;
        height:1px !important;
        margin:-1px !important;
        padding:0 !important;
        overflow:hidden !important;
        border:0 !important
        }
        
    #social .icon{
        display:inline-block;
        line-height:1;
        position:relative;
        vertical-align:middle;
        zoom:1;
        font-style:normal;
        font-weight:normal;
        text-align:center
        }
    
    #social .icon{
        width:1em;
        height:1em
        }
    
    #social .icon:before{
        content:attr(data-icon)
        }
    
    #social .icon--natural{
        font-size:inherit
        }
        
    @font-face{
        font-family: "IcoMoon";
        src: url(http://themes.theultralinx.com/fonts/ultraflow/icomoon.eot);
        src: url(http://themes.theultralinx.com/fonts/ultraflow/icomoon.eot?#iefix) format("embedded-opentype"), url(http://themes.theultralinx.com/fonts/ultraflow/icomoon.svg#icomoon) format("svg"), url(http://themes.theultralinx.com/fonts/ultraflow/icomoon.woff) format("woff"), url(http://themes.theultralinx.com/fonts/ultraflow/icomoon.ttf) format("truetype");
        font-weight:normal;
        font-style:normal
        }
        
    footer #social{
        display:inline-block;
        float:left;
        padding:0;
        margin:-5px 0 0;
        list-style:none;
        }
        
    footer #social li{
        list-style-type:none;
        display:inline;
        padding:0 5px;
        line-height:0
        }
    
    footer #social a{
        display:inline-block;
        width:30px;
        height:30px;
        text-align:center;
        font:20px/28px "IcoMoon";
        color:{color:Social Links};
        border-radius:20px;
        }
    
    /* END Social Links */
    
    {block:permalinkpage}
    
    #permalink #header{
        height:140px;
        padding:50px 65px;
        }
    
    #permalink #posts{
        margin:auto
        }
    
    #permalink #description{
        display:none
        }
    
    #permalink #posts-container{
        margin:auto;
        padding:50px 0
        }
    
    #posts-container.s #posts .p-photo{
        width:840px;
        margin:0 0 0 -170px
        }
    
    #posts-container.b #posts .p-photo{
        width:1040px;
        margin:0 0 0 -170px
        }
    
    #posts-container.s #posts .p-photo .content{
        width:500px !important
        }
    
    #posts-container.b #posts .p-photo .content{
        width:700px !important
        }
    
    #posts-container.s #posts{
        width:500px
        }
    
    #posts-container.b #posts{
        width:700px
        }
    
    #sidebar{
        width:100%;
        margin:20px 0
        }
    
    #sidebar:after{ 
        content:" ";
        display:block; 
        height:0; 
        clear:both
        }
    
    .p-photo #sidebar{
        width:300px !important;
        margin:0 !important;
        float:right
        }
    
    .p-photo .content{
        float:left
        }
    
    .p-show,
    .p-photo .p-hide{
        display:none
        }
    
    .p-photo .p-show{
        display:block
        }
    
    #permalink .content{
        height:auto;
        width:100%;
        margin:0 0 0 20px
        }
    
    .captions {
        margin-bottom:40px
        }
    
    .meta-data{
        display:inline-block;
        width:30%;
        font-size:13px;
        margin:0 0 30px
        }
    
    .p-photo .meta-data{
        display:block !important;
        width:100% !important
        }
    
    .meta-headers {
        font-weight:bold;
        margin-bottom: 5px;
    }
    
    #sidebar,
    #sidebar a{
        color:{color:Category Links}
        }
    
    #sidebar .tags li{
        display:inline;
        margin-right: 5px;
        }
    
    #permalink .content{
        margin:0
        }
    
    #permalink .content .text-post{
        padding:0
        }
    
    .permalink-box{
        margin:30px auto 0 auto
        }
    
    ol.notes{
        margin:20px 0 0 -40px;
        list-style-type:none
        }
    
    ol.notes h2{
        margin:0 0 0 20px
        }
    
    ol.notes li.note{
        padding:3px 0
        }
    
    ol.notes img{
        padding:0 10px 0 0
        }
    
    {/block:permalinkpage}
    
    /*      Animation CSS       */
    
    #pagination{
        opacity:0
        }
    
    #posts,
    #pagination{
        -webkit-transition:opacity .6s linear;
        -moz-transition:opacity .6s linear;
        -o-transition:opacity .6s linear;
        -ms-transition:opacity .6s linear;
        transition:opacity .6s linear
        }
    
    #infscr-loading{
        position:absolute;
        bottom:30px;
        left:50%;
        margin:0 0 0 -12px;
        }
         
    .animated{
        -webkit-animation-fill-mode:both;
        -moz-animation-fill-mode:both;
        -ms-animation-fill-mode:both;
        -o-animation-fill-mode:both;
        animation-fill-mode:both;
        -webkit-animation-duration:1s;
        -moz-animation-duration:1s;
        -ms-animation-duration:1s;
        -o-animation-duration:1s;
        animation-duration:1s
        }
        
    .animated.hinge{
        -webkit-animation-duration:1s;
        -moz-animation-duration:1s;
        -ms-animation-duration:1s;
        -o-animation-duration:1s;
        animation-duration:1s
        }
    
    @-webkit-keyframes fadeInDown {
        0%{
            opacity:0;
            -webkit-transform:translateY(-20px)
        }
        
        100%{
            opacity:1;
        	-webkit-transform:translateY(0)
        	}
        }
        
    @-moz-keyframes fadeInDown {
        0%{
        	opacity:0;
        	-moz-transform:translateY(-20px)
        }
        
        100%{
        	opacity: 1;
        	-moz-transform:translateY(0)
        	}
        }
        
    @-o-keyframes fadeInDown {
        0%{
        	opacity:0;
        	-o-transform:translateY(-20px)
        }
        
        100%{
        	opacity:1;
        	-o-transform:translateY(0)
        }
    }
        
    @keyframes fadeInDown {
        0%{
        	opacity:0;
        	transform:translateY(-20px)
        	}
        
        100%{
        	opacity:1
        	transform:translateY(0);
        	}
        }
        
    .fadeInDown{
        -webkit-animation-name:fadeInDown;
        -moz-animation-name:fadeInDown;
        -o-animation-name:fadeInDown;
        animation-name:fadeInDown
        }
    
    /*      End-Animation CSS   */
    
    /*      Responsive      */
    
    @media screen and (max-width:1050px) {
        
        #posts{
            width:700px        
            }
        
        #permalink #posts-container{
            width:90% !important;
            max-width:680px;
            margin:auto !important;
            }
    
        #permalink #posts,
        #permalink .content,
        #permalink #sidebar{
            float:none !important;
            width:100% !important;
            margin:auto !important;
            }
    
        }
    
    @media screen and (max-width:700px) {
        
    
        #header #description{
            position:absolute;
            width:90%;
            top:50%;
            left:5%;
            margin-left:0 !important
            }
        
        #posts{
            width:350px
            }
        
        footer{
            text-align:center;    
            }
        
        footer #social{
            display:block;
            margin:0 0 20px;
            float:none;    
            }
    
        }
    
    @media screen and (max-width:500px) {
        
        #header{
            text-align:center    
            }
    
        #header #navigation{
            display:block;
            float:none;
            margin:20px 0;
            }
    
        #header #navigation li{
            margin:0 15px    
            }
    
        }
    
    /*     End-Responsive    */
    
    .isotope-item {
      z-index: 2;
    }
    
    .isotope-hidden.isotope-item {
      pointer-events: none;
      z-index: 1;
    }
    
    
    .post .imgb a {
    	display:block;
    	width:100%;
    	height:100%;
    	overflow:hidden;
    }
    
    .isotope, .isotope .isotope-item {
    	/* change duration value to whatever you likesocial */
      -webkit-transition-duration: 0.8s;
    	-moz-transition-duration: 0.8s;
    	-ms-transition-duration: 0.8s;
    	-o-transition-duration: 0.8s;
    	transition-duration: 0.8s;
    }
    .isotope {
    	-webkit-transition-property: height, width;
    	-moz-transition-property: height, width;
    	-ms-transition-property: height, width;
    	-o-transition-property: height, width;
    	transition-property: height, width;
    }
    .isotope .isotope-item {
    	-webkit-transition-property: -webkit-transform, opacity;
    	-moz-transition-property:    -moz-transform, opacity;
    	-ms-transition-property:     -ms-transform, opacity;
    	-o-transition-property:      -o-transform, opacity;
    	transition-property:         transform, opacity;
    }
    /**** disabling Isotope CSS3 transitions ****/
    
    .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    	-webkit-transition-duration: 0s;
    	-moz-transition-duration: 0s;
    	-ms-transition-duration: 0s;
    	-o-transition-duration: 0s;
    	transition-duration: 0s;
    }
    #infscr-loading {
    	clear:both;
    }
    
    .active{
        color:#fff !important
        }

  • #2
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And the rest of my code (CSS).

    Code:
    {CustomCSS}
    </style>
    
            <script>
                var UltraMnml = window.UltraMnml || {};
    
    UltraMnml.showFlickrPhotos = {block:IfShowFlickrPhotos}true{/block:IfShowFlickrPhotos}{block:IfNotShowFlickrPhotos}false{/block:IfNotShowFlickrPhotos};
    UltraMnml.showInstagramPhotos = {block:IfShowInstagramPhotos}true{/block:IfShowInstagramPhotos}{block:IfNotShowInstagramPhotos}false{/block:IfNotShowInstagramPhotos};
    UltraMnml.showDribbbleShots = {block:IfShowDribbbleShots}true{/block:IfShowDribbbleShots}{block:IfNotShowDribbbleShots}false{/block:IfNotShowDribbbleShots};
    
    {block:IfFlickrID}UltraMnml.flickrID = '{text:Flickr ID}';{/block:IfFlickrID}
    {block:IfInstagramAccessToken}UltraMnml.instagramAccessToken = '{text:Instagram Access Token}';{/block:IfInstagramAccessToken}
    {block:IfDribbbleUsername}UltraMnml.dribbbleUsername = '{text:Dribbble Username}';{/block:IfDribbbleUsername}
            </script>
    
    </head>
    <body{block:permalinkpage} id="permalink"{/block:permalinkpage}>
    <!-- Tumblr Theme #38353 -->
    <header id="header">
        
            {block:ifnotlogoimage}
                <h1><a href="/">{title}</a></h1>
            {/block:ifnotlogoimage}
    
            {block:iflogoimage}
                <a href="/"><img src="{image:Logo}" alt="{title}"/></a>
            {/block:iflogoimage}
        
            <nav id="navigation">
                {block:HasPages}
                    {block:Pages}
                    <li><a href="{URL}">{Label}</a></li>
                    {block:Pages}
                {/block:HasPages}
                {block:AskEnabled}
                    <li><a href="/ask">Ask</a></li>
                {/block:AskEnabled}
                {block:SubmissionsEnabled}
                    <li><a href="/submit">Submit</a></li>
                {/block:SubmissionsEnabled}
                {block:IfShowArchiveLink}
                    <li><a href="/archive">Archive</a></li>
                {/block:IfShowArchiveLink}
                {block:IfShowRandomLink}
                    <li><a href="/random">Random</a></li>
                {/block:IfShowRandomLink}
                {block:IfShowRSSLink}
                    <li><a href="{RSS}">RSS</a></li>
                {/block:IfShowRSSLink}
            </nav>
    
        {block:Description}
            <p id="description">
                {Description}
                {block:IfShowHireMeButton}
                </br>
                <a class="button" href="mailto:{text:Email Address}">{text:Button Label}</a>
                {/block:IfShowHireMeButton}
            </p>
        {/block:Description}
    
    </header>
    
    <div id="posts-container" class="{select:Content Size on Post Page}">
    
    <div style="{block:permalinkpage}display:none{/block:permalinkpage}">
    
    {block:IfShowPortfolioHeading}
    <h2 class="latest">{text:Portfolio Heading}</h2>
    {/block:IfShowPortfolioHeading}
    
    {block:IfShowPortfolioCategories}
    <div id="filters">
    
        <li><a href="#" data-filter=".All">All</a></li>
    
        {block:ifcategory1title}
        <li><a href="#" data-filter=".{text:Category 1 Tag}">{text:Category 1 Title}</a></li>
        {/block:ifcategory1title}
        {block:ifcategory2title}
        <li><a href="#" data-filter=".{text:Category 2 Tag}">{text:Category 2 Title}</a></li>
        {/block:ifcategory2title}
        {block:ifcategory3title}
        <li><a href="#" data-filter=".{text:Category 3 Tag}">{text:Category 3 Title}</a></li>
        {/block:ifcategory3title}
        {block:ifcategory4title}
        <li><a href="#" data-filter=".{text:Category 4 Tag}">{text:Category 4 Title}</a></li>
        {/block:ifcategory4title}
        {block:ifcategory5title}
        <li><a href="#" data-filter=".{text:Category 5 Tag}">{text:Category 5 Title}</a></li>
        {/block:ifcategory5title}
        {block:ifcategory6title}
        <li><a href="#" data-filter=".{text:Category 6 Tag}">{text:Category 6 Title}</a></li>
        {/block:ifcategory6title}
        {block:ifcategory7title}
        <li><a href="#" data-filter=".{text:Category 7 Tag}">{text:Category 7 Title}</a></li>
        {/block:ifcategory7title}
        {block:ifcategory8title}
        <li><a href="#" data-filter=".{text:Category 8 Tag}">{text:Category 8 Title}</a></li>
        {/block:ifcategory8title}
        {block:ifcategory9title}
        <li><a href="#" data-filter=".{text:Category 9 Tag}">{text:Category 9 Title}</a></li>
        {/block:ifcategory9title}
    
    </div>
    {/block:IfShowPortfolioFilters}
    
    </div>
    
    <section id="posts">
    
    {block:Posts}
    
    <section class="{block:Photo}p-photo{/block:Photo}{block:Photoset}p-photo{/block:Photoset}">
    
    <article id="{PostID}" class="content All{block:HasTags}{block:Tags} {Tag}{/block:Tags}{/block:HasTags}">
    
    <div class="{block:Answer}text-post{/block:Answer}{block:Chat}text-post{/block:Chat}{block:Link}text-post{/block:Link}{block:Text}text-post{/block:Text}{block:Quote}text-post{/block:Quote}{block:Video}text-post{/block:Video}{block:Audio}text-post{/block:Audio}{block:Photo}{block:indexpage}photo{/block:indexpage}{block:permalinkpage}text{/block:permalinkpage}-post{/block:Photo}{block:Photoset}{block:indexpage}photo{/block:indexpage}{block:permalinkpage}text{/block:permalinkpage}-post{/block:Photoset}">
    
    <a class="post-overlay" href="{permalink}" alt="title"></a>
    
    {block:Answer}
        <h4>{Asker} asked: {Question}</h4>
        {Answer}
    {/block:Answer}
    
    {block:Chat}
        {block:Title}<h2>{Title}</h2>{/block:Title}
        {block:Lines}
            <ul class="chat">
                <li>{block:Label}<b>{Label}</b>{/block:Label} {Line}</li>
            </ul>              
        {/block:Lines}
    {/block:Chat}
    
    {block:Link}
        <h3><a href="{URL}" {Target}>{Name} &rarr;</a></h3>
        {block:Description}
            {Description}
        {/block:Description}
    {/block:Link} 
    
    {block:Text}
        {block:Title}<h3>{Title}</h3>{/block:Title}
        {Body}
    {/block:Text}
    
    {block:Quote}
        <div class="quote">{Quote}</div>
            {block:Source}
                <div id="quoteSource"><p>&mdash; {Source}</p></div>
            {/block:Source}
    {/block:Quote}   
     
    {block:Photo}
    <div class="photo">
        {block:indexpage}
            <a href="{permalink}" class="overlay"></a>
            <div class="photo-background" style="background:url('{PhotoURL-500}') center center no-repeat;-webkit-background-size: cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover"></div>
        {/block:indexpage}
        {block:permalinkpage}
        {LinkOpenTag}
            <img src="{PhotoURL-HighRes}"alt="{PhotoAlt}">
        {LinkCloseTag}
        {/block:permalinkpage}
    </div>             
    {/block:Photo}
    
    {block:Panorama}
    <li class="panorama">
        {LinkOpenTag}
            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
        {LinkCloseTag}
    </li>
    {/block:Panorama}
              
    {block:Photoset}
    
    {block:indexpage}
    <div class="photo photoset">
        <a href="{permalink}" class="overlay"></a>
        {block:Photos}
    <li class="photo-background" style="background:url('{PhotoURL-500}') center center no-repeat;-webkit-background-size: cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover"></li>
        {/block:Photos}
    </div>             
    {/block:indexpage}
    
    {block:permalinkpage}
    <div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}">{block:Photos}<img src="{PhotoURL-HighRes}"{block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}{block:Caption}alt="{Caption}"{/block:caption}/>{block:Photos}
    </div>
    {/block:permalinkpage}
    {/block:Photoset}
     
    {block:Audio}
    <div class="media">
        {block:IndexPage}
            {AudioEmbed-400}
        {/block:IndexPage}
        {block:permalinkpage}
            {AudioEmbed-500}
        {/block:permalinkpage}
    </div>             
    {/block:Audio}
     
    {block:Video}
    <div class="media">
        {block:IndexPage}
                {VideoEmbed-400}
        {/block:IndexPage}
        {block:permalinkpage}
            {VideoEmbed-500}
        {/block:permalinkpage}
    </div>
    {/block:Video}
    
    <section class="p-show">
    
    {block:date}
    
    {block:PermalinkPage}
    
    {block:IfDisqusShortname}<div class="permalink-box"><script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script><div id="disqus_thread"></div><script type="text/javascript">var disqus_identifier = {PostID};(function() {var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js';(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);})();</script><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript></div>{/block:IfDisqusShortname}
    
    {block:PostNotes}
    <div class="permalink-box">
    {PostNotes}
    </div>
    {/block:PostNotes}
    
    {/block:PermalinkPage}
    
    {/block:date}
    
    </section>             
    
    </div><!-- P-selecter-->
    </article><!--      content       -->
    
    {block:permalinkpage}
    
    <aside id="sidebar">
    
        {block:Caption}
            <div class="captions">
            {Caption}
            </div>             
        {/block:Caption}
        
        <div class="meta-data">
        <div class="meta-headers">Date</div>
        {Month} {Year}
        </div>
        
        <div class="meta-data">
        <div class="meta-headers">Notes</div>
        {NoteCountWithLabel}
        </div>
        
        <div class="meta-data">
        <div class="meta-headers">Tags</div>
        {block:HasTags}
            <div class="tags">
                {block:Tags}
                    <li>
                        <a href="{TagURL}">#{Tag}</a>
                    </li>
                {/block:Tags}
            </div>
        {/block:HasTags}
        </div>             
    
    <section class="p-hide">
    
    {block:PermalinkPage}
    
    {block:PostNotes}
    <div class="permalink-box">
    {PostNotes}
    </div>
    {/block:PostNotes}
    
    {/block:PermalinkPage}
    
    </section>
    
    </aside> <!-- /sidebar -->
    
    {/block:permalinkpage}
    
    {/block:Posts}
    
    </section><!--  Posts    -->               
    
    {block:Pagination}
    <section id="pagination-container">
        <nav id="pagination">
            {block:NextPage}
                <a id="more-projects" href="{NextPage}">load more</a>
            {/block:NextPage} 
        </nav>
    </section>
    {/block:Pagination}
    
    </div><!--  Posts-container    -->             
    
    <footer>
    
        <ul id="social">
            {block:IfEmailAddress}<li><a href="mailto:{text:Email Address}"><i class="icon" data-icon="&#xe000;"></i><span class="visuallyhidden">Email</span></a></li>{/block:IfEmailAddress}
            {block:IfFacebookURL}<li><a href="{text:Facebook URL}"><i class="icon" data-icon="&#xe001;"></i><span class="visuallyhidden">Facebook</span></a></li>{/block:IfFacebookURL}
            {block:IfGooglePlusURL}<li><a href="{text:GooglePlus URL}"><i class="icon" data-icon="&#xe002;"></i><span class="visuallyhidden">Google+</span></a></li>{/block:IfGooglePlusURL}
            {block:IfTwitterURL}<li><a href="{text:Twitter URL}"><i class="icon" data-icon="&#xe003;"></i><span class="visuallyhidden">Twitter</span></a></li>{/block:IfTwitterURL}
            {block:IfInstagramURL}<li><a href="{text:Instagram URL}"><i class="icon" data-icon="&#xe004;"></i><span class="visuallyhidden">Instagram</span></a></li>{/block:IfInstagramURL}
            {block:IfYouTubeURL}<li><a href="{text:YouTube URL}"><i class="icon" data-icon="&#xe005;"></i><span class="visuallyhidden">YouTube</span></a></li>{/block:IfYouTubeURL}
            {block:IfVimeoURL}<li><a href="{text:Vimeo URL}"><i class="icon" data-icon="&#xe006;"></i><span class="visuallyhidden">Vimeo</span></a></li>{/block:IfVimeoURL}
            {block:IfFlickrURL}<li><a href="{text:Flickr URL}"><i class="icon" data-icon="&#xe007;"></i><span class="visuallyhidden">Flickr</span></a></li>{/block:IfFlickrURL}
            {block:IfDribbbleURL}<li><a href="{text:Dribbble URL}"><i class="icon" data-icon="&#xe008;"></i><span class="visuallyhidden">Dribbble</span></a></li>{/block:IfDribbbleURL}
            {block:IfSteamURL}<li><a href="{text:Steam URL}"><i class="icon" data-icon="&#xe009;"></i><span class="visuallyhidden">Steam</span></a></li>{/block:IfSteamURL}
            {block:IfGitHubURL}<li><a href="{text:GitHub URL}"><i class="icon" data-icon="&#xe00a;"></i><span class="visuallyhidden">GitHub</span></a></li>{/block:IfGitHubURL}
            {block:IfWordPressURL}<li><a href="{text:WordPress URL}"><i class="icon" data-icon="&#xe00b;"></i><span class="visuallyhidden">WordPress</span></a></li>{/block:IfWordPressURL}
            {block:IfBloggerURl}<li><a href="{text:Blogger URL}"><i class="icon" data-icon="&#xe00c;"></i><span class="visuallyhidden">Blogger</span></a></li>{/block:IfBloggerURL}
            {block:IfSoundCloudURL}<li><a href="{text:SoundCloud URL}"><i class="icon" data-icon="&#xe00d;"></i><span class="visuallyhidden">SoundCloud</span></a></li>{/block:IfSoundCloudURL}
            {block:IfSkypeURL}<li><a href="{text:Skype URL}"><i class="icon" data-icon="&#xe00e;"></i><span class="visuallyhidden">Skype</span></a></li>{/block:IfSkypeURL}
            {block:IfLinkedInURL}<li><a href="{text:LinkedIn URL}"><i class="icon" data-icon="&#xe00f;"></i><span class="visuallyhidden">LinkedIn</span></a></li>{/block:IfLinkedInURL}
            {block:IfLastfmURL}<li><a href="{text:Lastfm URL}"><i class="icon" data-icon="&#xe010;"></i><span class="visuallyhidden">Last.fm</span></a></li>{/block:IfLastfmURL}
            {block:IfPinterestURL}<li><a href="{text:Pinterest URL}"><i class="icon" data-icon="&#xe011;"></i><span class="visuallyhidden">Pinterest</span></a></li>{/block:IfPinterestURL}
        </ul>              
    
        <div id="credit">
            
    NOHUDDLR is not affiliated with the National Football League | <strong>NOHUDDLR ©2014</strong>
        </div>
    
    </footer>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
    <script type="text/javascript" src="http://static.tumblr.com/vbjnszm/ADNml1og2/isotope.js"></script>
    
    <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
    <script src="http://static.tumblr.com/69tjawj/gE5msexii/jquery.infinitescroll.min.js" type="text/javascript"></script>
    
            <!-- Flickr, Instagram & Dribbble Widgets JS -->
    <script src="http://static.tumblr.com/1fi8gnl/qcgmux8b0/jquery.jflickrfeed.js"></script>
    <script src="http://static.tumblr.com/1fi8gnl/5SUmux8ch/flickr_instagram_dribbble_1.js"></script>
    
    
    <script src="http://static.tumblr.com/wgijwsy/jgemkyt9x/jquery.photoset-grid.min.js"></script>
    
    <script src="http://static.tumblr.com/ab9wqgz/t1Mms94nt/lightbox.js"></script>
    
    <script type="text/javascript">
    {block:Indexpage}
    
    var $container = $("#posts");
    
    $container.isotope({
      // options
      itemSelector:".content",
      layoutMode:'masonry'
    });
    
    $('#filters a').click(function (e) {
    	e.preventDefault();
    	var selector = $(this).text().trim().replace(' ', '%20');
    	if (selector == 'viewall') {
    		selector = '*';
    	} else {
    		selector = '.' + selector;
    	}
    	$("#filters a").addClass('active');
    	$('#filters a').removeClass('active');
    	$('#posts').isotope({
    		filter: selector,
    		itemSelector: '.post'
    	});
    });
    
    function moreProjects(){
    	$container.infinitescroll({
    		navSelector: "#pagination",
    		nextSelector: "#pagination #more-projects",
    		itemSelector: ".content",
        	bufferPx:100
    	},
    
    	function (newElements) {
    		var $newElems = $(newElements).css({
    			opacity: 0
    		});
    		$newElems.imagesLoaded(function () {
    		
    	  
    			// Show elems now they're ready
    	   $newElems.animate({opacity: 1});
    			$container.isotope( 'insert', $newElems );
    		});
    	});
    
    // kill scroll binding
    $(window).unbind('.infscr');
    
    // hook up the manual click guy.
    $('#more-projects').click(function(){
      $(document).trigger('retrieve.infscr');
      return false;
    });
    
    // remove the paginator when we're done.
    $(document).ajaxError(function(e,xhr,opt){
      if (xhr.status == 404) $('#more-projects').css("opacity","0");
    });
    
    }
    moreProjects();
    
    {/block:Indexpage}
    
    </script>
    
    <script type="text/javascript">
    
    $("#description").css("margin-top",-$("#description").outerHeight()/2 + 30 + "px" );
    
    //  photoset
    
    $('.photoset-grid').photosetGrid({
        highresLinks: true,
        rel: $('.photoset-grid').attr('data-id'),
        gutter: '30px',
        onComplete: function(){}
        });
    
    $('.photoset-grid').each(function() {
        $(this).magnificPopup({
        delegate: 'a', // the container for each your gallery items
        type: 'image',
        gallery:{enabled:true},
        // Delay in milliseconds before popup is removed
        removalDelay: 300,
        // Class that is added to popup wrapper and background
        // make it unique to apply your CSS animations just to this exact popup
        mainClass: 'mfp-fade'
    });});
    </script>
    
    {block:Twitter}
        <script type="text/javascript" src="/tweets.js"></script>
    {/block:Twitter}
    <script type="text/javascript">
    
    /*      Animated Loading    */
    
    $(window).load(function() {
        setTimeout( function(){
            $('#posts').css("opacity","1");
        },300);
        
        setTimeout( function(){
            $('#pagination').css("opacity","1");
        },600);
    });
    
    {block:IfGoogleAnalyticsID}
    var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
    {/block:IfGoogleAnalyticsID}
    
    </script>
    
    </body>
    <!--
        This Tumblr Theme and all of its CSS, Javascript,
        and media assets are subject to Tumblr's Terms of Service:
    
        http://www.tumblr.com/terms_of_service
    -->
    </html>

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    AND MY WEBSITE LINK: NOHUDDLR


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •