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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    TUMBLR: How to show post title captions on hover of image

    Hi all,

    I would like some advice on how to show my post title on hover of an image on my home page - www.ellekorhaliller.co.uk (Posted my code below)

    I am using Tumblr for my portfolio website and as you can see, I use posts to display my images. I am using an On Hover function already that smoothly changes the opacity of the images on hover.
    However, I need to also display a title or caption on hover to explain about each peice of work.
    I want to be able to use my post's title as the caption therefore I think I will need to use some Tumblr markup/language to do so.
    Something with the {block:Photo} {block:Caption} tags.

    There is an example of what I mean on this link : http://haiku-movie-review.tumblr.com

    However, I'm not experienced enough to know how to implement this!
    Would anybody know how to create this?

    Many thanks,

    Elle.

    Code:
    <html>
    <head>
    <link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Quicksand:300,400,700:latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })(); </script>
      
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
    <meta name="description" content="{MetaDescription}" />
    {/block:Description}
    
    
    
    <!--
    Passive Aggressive 3.0
    Created by Aiurare
    -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="http://static.tumblr.com/twte3d7/BH7lio0yf/jquery.js"></script> 
    
    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery(".postnotes").hide();
    //toggle the componenet with class msg_body
    jQuery(".viewnotes").click(function()
    {
    jQuery(this).next(".postnotes").slideToggle(700);
    });});
    </script>
    
    
    <!-- DEFAULT COLORS -->
    <meta name="color:Text" content="#000000"/>
    <meta name="color:Links" content="#8D8D8D"/>
    <meta name="color:Accent" content="#E9E9E9"/>
    <meta name="if:Endless Scroll" content="1"/>
    <meta name="if:Hide Footer" content="0"/>
    
    <link rel="shortcut icon" href="{Favicon}">
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
    <meta name="description" content="{MetaDescription}" />
    {/block:Description}
    
    <style type="text/css">
    
    
    body{
    text-align:justify; 
    font-family: 'Quicksand', sans-serif;
    font-size: 13px; 
    color:{color:text}; 
    background-color:#fff;
    }
    ::-webkit-scrollbar-thumb:vertical { 
    background-color:{color:Links};
    height:100px;
    }
    ::-webkit-scrollbar-thumb:horizontal { 
    background-color:{color:Links};
    height:10px !important;
    }
    ::-webkit-scrollbar { 
    height:10px;
    width:5px; 
    background-color:#fff;
    }
    .tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
    
    a{
    text-decoration:none; 
    color:{color:Text};
    }
    {block:PermalinkPage}
    a:hover{ 
        
        text-decoration:none;
        color:#ffffff;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
    	-o-transition: all .25s ease-in-out;
    	-webkit-transition: all .25s ease-in-out;
    	transition: all .25s ease-in-out;}
    color:{color:Text};
    }
    {/block:PermalinkPage}
    
    img {
    border:none;
    margin:0px;
    padding:0px;
    }
    
    a img {
    -webkit-transition: opacity 0.3s linear;
    border-width:0;
    outline: none !important;
    }
    
    px solid #fdfcfc;
        }
        
        #right{
        width:780px;
        float:left;
        }
        
     
    
    #entry{
    {block:IndexPage}
    top:100px;
    width:360px;
    -webkit-transition: opacity 0.3s linear;
    display: inline-block;
    overflow:hidden;
    
    padding-left: 15px;
    margin:75px 20px 15px 0px;
    max-height:215px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:770px;
    padding-top:100px;
    {/block:PermalinkPage}
    }
    #entry img{
    {block:IndexPage}
    text-align:center;
    display: block;
    margin:auto;
    max-width:360px;
    max-height:215px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:770px;
    {/block:PermalinkPage}
    }
    .title, .h2{ 
    font-weight:bold;
    font-size:16px;
    line-height:20px;
    text-align:left;
    }
    .quote{
    margin-bottom:3px;
    font-size:11px;
    font-weight:bold;
    }
    .quoteicon {
    padding-top:3px;
    width:20px;
    float:left;
    }
    {block:IndexPage}
    .audio {
    width:240px; height:240px;
    }
    .art{
    width:240px !important;
    height:240px !important;
    background:#000;
    }
    .player {
    width:240px;
    height:240px;
    position:relative;
    }
    .player img {
    width:240px; height:240px;
    }
    .audioplayercircle {
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px; 
    position: absolute;
    z-index: 3;
    background: white;
    top: 75px; left: 90px;
    }
    .audioplayer {
    width: 28px;
    height: 30px;
    overflow: hidden;
    margin: 15px 15px 13px 15px;
    }
    {/block:IndexPage}
    {block:PermalinkPage}
    .audio{
    position:relative;
    overflow:hidden;
    color:#222!important;
    }
    
    .art{
    float:left;
    width:215px !important;
    height:215px !important;
    margin-right:20px;
    background:#000;
    }
    .audio img{ width:215px!important; height:100px!important;}
    .audioplayer{
    width: 28px;
    height: 30px;
    overflow: hidden;
    margin: 15px;
    }
    .audioplayercircle {
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    position: absolute;
    left:22px;
    top:22px;
    z-index: 3;
    background: white;
    }
    {/block:PermalinkPage}
    div.video embed,
    div.post div.video object {
    {block:IndexPage}
    width:240px; height:168px;{/block:IndexPage}
    {block:PermalinkPage} width:770px; height:500px;{/block:PermalinkPage}
    }
    #footer { width: 770px; margin:20px 0px 0px 0px; text-align:center; color:#333; }
    #pagination { float:left; width:770px; margin:20px 0px 20px 0px; padding:0px 0px 0px 0px; text-align:left; letter-
    
    spacing:1px;}
    #pagination a {padding:3px;
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
    -o-transition: all 0.3s ease-out; /* Opera 10.5 */
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */}
    #pagination a:hover { background:{color:Accent};
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
    -o-transition: all 0.3s ease-out; /* Opera 10.5 */
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ }
    .current_page { padding-top:3px; background:{color:Links};}
    
    #entry:hover .notecount{
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
    -o-transition: all 0.3s ease-out; /* Opera 10.5 */
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;
    opacity:1 !important;
    background:url('http://static.tumblr.com/twte3d7/gpQlk3sfc/overlay.png');
    }
    .notecount{
    background:url('http://static.tumblr.com/twte3d7/gpQlk3sfc/overlay.png');
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
    -o-transition: all 0.3s ease-out; /* Opera 10.5 */
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;
    z-index:1000;
    font-size:30px;
    opacity:0;
    display:table;
    position:absolute;
    height:215px;
    overflow:hidden;
    width: 360px;
    }
    #content{
    margin:auto;
    width:795px;
    padding-top:20px;
    }
    #header {
    width:770px;
    top: 0px;
    padding:20px 0;
    margin:0 0 35px 0;
    border-bottom:1px solid #000;
     z-index:5000;
      position: fixed;
      background-color:#ffffff;
    }
    .box {
    position:relative;
    width:770px;
    border-top:1px solid #ccc;
    margin-top:20px;
    padding:20px 0;
    float:left;
    }
    .blogtitle {
    -webkit-text-stroke: 1px transparent;
    text-transform:uppercase;
    font-weight:bold;
    
    padding-top: 17px;
    font-size:17px;
    }
    .navigation {
    padding-top:22px;
    float:right;
    text-transform:uppercase;
    font-size:10px;
    }
    .navigation a {
    border-bottom:2px solid white;
    margin:0 0 0 15px;
    padding-bottom: 4px;
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
    -o-transition: all 0.3s ease-out; /* Opera 10.5 */
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;
    }
    .navigation a:hover {
    border-bottom:2px solid;
    padding-bottom: 4px;
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
    -o-transition: all 0.3s ease-out; /* Opera 10.5 */
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;
    }
    ol.notes {
    border-bottom: solid 1px #eee;
    padding: 0px;
    opacity:0.7;
    font-size:11px;
    margin: 15px 0px 0px 0px;
    list-style-type: none;
    }
    ol.notes li.note {
    border-top: solid 1px #eee;
    padding: 7px 0px 7px 0px;
    }
    ol.notes li.note img.avatar {
    display:none;
    height:0px;
    width:0px;
    }
    ol.notes li.note span.action {
    font-weight: normal;
    }
    ol.notes li.note .answer_content {
    font-weight: normal;
    }
    ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
    }
    ol.notes li.note blockquote a {
    text-decoration: none;
    }
    {CustomCSS}
    </style>
    
    <script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-
    
    8"></script>
    <script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
    <script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>
    
    {block:IfEndlessScroll}
    <script type="text/javascript" 
    
    src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
    {/block:IfEndlessScroll}
    
    </head>
    
    <body>
    
    <div id="content">
    
    <div id="header">
    <div class="navigation"><a href="http://www.ellekorhalillerweb.tumblr.com">Editorial</a> <a href="http://www.ellekorhalillercommercial.tumblr.com">Commercial</a> <a href="http://www.ellekorhalillerweb.tumblr.com/information">Info</a> {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> {/block:Pages}{/block:HasPages} <a href="http://www.ellekorhalillerweb.tumblr.com/contact">Contact</a></div>
    <div class="blogtitle"><a href="/">{Title}</a></div>
    </div>
    
    {block:IfEndlessScroll}
    <div class="autopagerize_page_element">
    {/block:IfEndlessScroll}
    
    {block:Posts}
    <div id="entry">
    
    {block:IndexPage}{block:Date}<a href="{Permalink}"><div class="notecount"><div style=" _position: absolute; 
    
    _top: 50%; display: table-cell; vertical-align: middle;"> 
    <p style=" _position: relative; _top: -50%"></p></div></div></a>{/block:Date}{/block:IndexPage}
    
    {block:IndexPage}
    <div style="display: table; height: 215px; width: 260px; _position: relative; overflow: hidden;"> 
    <div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> 
    <p style=" _position: relative; _top: -50%">{/block:IndexPage}
    
    {block:Text}
    {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
    {Body}
    {/block:Text}
    
    {block:Photo}
    {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
    {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
    <img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}
    
    {/block:PermalinkPage}" alt="{PhotoAlt}"/>
    {block:IndexPage}</a>{/block:IndexPage}
    {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
    {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
    {/block:Photo}
    
    {block:Photoset}
    {Photoset-500}
    {/block:Photoset}
    
    {block:Quote}
    <div class="quote"><div class="quoteicon"><img src="http://static.tumblr.com/twte3d7/toGlmwngb/left_quote_12x12.png"></div>{Quote}</div>
    {block:Source}<p>— {Source}</p>{/block:Source}
    {/block:Quote}
    
    {block:Link}
    <div class="h2"><a href="{URL}">&raquo; {Name}</a></div>{block:Description}
    {Description}
    {/block:Description}
    {/block:Link}
    
    {block:Chat}
    {block:Title}<b><a href="{Permalink}">{Title}</a></b>{/block:Title}
    {block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}
    {/block:Chat}
    
    
    {block:IndexPage}{block:Audio}
    <div class="audio">
    <div class="player">
    <div class="audioplayercircle"><div class="audioplayer">{AudioPlayerWhite}</div></div>
    <div class="overlay"></div>
    <a href="{Permalink}"><div class="art">{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}"></a>
    {/block:AlbumArt}</div></a>
    </div>
    </div>
    {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
    {/block:Audio}{/block:IndexPage}
    {block:PermalinkPage}
    {block:Audio}
    <div class="post audio">
    <div class="art">{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}" width="50" 
    
    height="50"></a>
    {/block:AlbumArt}</div>
    <div class="audioplayercircle"><div class="audioplayer">{AudioPlayerWhite}</div></div>
    <div style="display: table; height: 215px; width: 380px; _position: relative; overflow: hidden;">
    <div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
    <p style=" _position: relative; _top: -50%">{/block:IndexPage}{block:Caption}{Caption}</p></div></div>
    
    {/block:Caption}
    </div>
    {/block:Audio}
    {/block:PermalinkPage}
    
    
    {block:Answer}
    <b>{Asker}: {Question}</b>
    {Answer}
    {/block:answer}
    
    {block:Video}
    <div class="video">
    {Video-500}
    </div>
    {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
    {/block:Video}
    
    {block:IndexPage}</p></div></div>{/block:IndexPage}
    </div>
    {/block:Posts}
    
    {block:IfEndlessScroll}</div>{/block:IfEndlessScroll}
    
    {block:IfNotEndlessScroll}
    {block:Pagination}<div id="footer"><div id="pagination">
    {block:PreviousPage}
    <a href="{PreviousPage}">&laquo; Previous</a>
    {/block:PreviousPage}
    {block:JumpPagination length="5"}
    {block:CurrentPage}
    <span class="current_page">{PageNumber}</span>
    {/block:CurrentPage}
    {block:JumpPage}
    <a class="jump_page" href="{URL}">{PageNumber}</a>
    {/block:JumpPage}
    {/block:JumpPagination}
    {block:NextPage}
    <a href="{NextPage}">Next &raquo;</a>
    {/block:NextPage}</div></div>
    {/block:Pagination}
    {/block:IfNotEndlessScroll}
    
    {block:IfNotHideFooter}<div class="box"><div style="float:left;"><img src="{PortraitURL-96}"></div> 
    {block:Description}<div style="width:240px; float:right; position:relative; right:0;">{Description}</div>
    {/block:Description}</div>{/block:IfNotHideFooter}
    </div>
    
    </body>
    </html>

  • #2


  •  

    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
    •