The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Tumblr: Is This Even Possible?
knicksnap
post Feb 29 2012, 02:28 PM
Post #1





Group: Members
Posts: 2
Joined: 28-February 12
Member No.: 16,596
So this is my blog umbi.me .... right now when you hover over the pictures nothing happens but i want it to look like this lifeandtimes.com

This is my code right now ..

CODE

html>
<!--    
    'White Tree House' theme for Tumblr by SamPortillo (c) 2010
    http://blog.samportillo.com
-->
<head>
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</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}

<meta name="color:Background" content="#fff"/>
<meta name="color:Border" content="#f8f8f8"/>
<meta name="color:Title" content="#777777"/>
<meta name="color:Description" content="#777777"/>
<meta name="color:Text" content="#333333"/>
<meta name="color:Nav" content="#777777"/>
<meta name="color:Links" content="#777777"/>
<meta name="color:Hover" content="#4d4d4d"/>

<meta name="if:Description" content="0"/>
<meta name="if:Show Random Link" content="1" />
<meta name="if:Endless Scrolling" content="0" />
<meta name="if:Notes" content="1" />


<meta name="text:Custom Link URL" content="" />
<meta name="text:Custom Link Title" content="" />
<meta name="text:Disqus Shortname" content="" />
<meta name="text:Google Analytics" content=""/>

<link rel="apple-touch-icon" href="{PortraitURL-96}"/>
<link rel="stylesheet" href="http://static.tumblr.com/n2yg7bp/0xvkkpend/reset.css" media="all" type="text/css" />

<style>
* {
margin:0;
padding:0;
outline:0;
border:0
}


body { color: {color:Text};
    font:12px georgia,"times new roman",times,serif;
    background:{color:background};
    border-top:solid 15px {color:border}
}

#container {
    width:795px;
    margin:0 auto;
padding-bottom: 30px;

}

a {text-decoration:none; color: {color:links};}

a:hover { -webkit-transition:all 0.2s ease-in-out; color:{color:Hover};}

li { list-style-bullet:square; margin:0 0 10px 30px}

blockquote,ol,ul,p,h6,h5,h4,h3,h2,h1 {margin:0 0 10px 0}


.main {padding-bottom: 50px; width: 795px;}



#title h1 {color: {color:title};
    text-align:center;
    font:normal normal 36px/20px Georgia,"Times New Roman",Times,serif;
    margin-top:30px
}

#description {color: {color:Description}; text-align: center;
font:normal normal 300 14px Georgia,"Times New Roman",Times,serif;
    weight:none;
    margin:10px 0 10px;}

.links {
    text-align:center;
    margin:15px 0 30px 0;
}



.links a {padding: 7px 12px;}

.post {text-align: center; float:left; height:300px; margin: 0px 15px 15px 0px;width:250px;height:300px;width:250px;overflow:hidden;}

.post .photo, .post .video, .post .audio {clear:both;display:block;overflow:hidden;}

.post .link h1, .text h1 {font-size: 24px; font-weight: none;}
.post .link .linkdescription h1 {font-size: 12px;}

.post img {max-height: auto; max-width: 250px; padding-bottom: 40px;}

.post .link img {max-height: auto; max-width: 250px; padding-bottom: 0px;}
.post .audio .artwork {width:250px; height: 250px;padding-bottom: 1px;}
.single {padding-top: 40px;}

.single .audio .artwork {max-width:230px; max-height: 230px; padding: 20px 5px 20px 5px;}
.single {text-align: center; width: 800px; margin: 0 auto}
.single .text {text-align: left;}

.single .video {width-max: 800; height: auto}
.single .link h1{font-size: 24px; padding-bottom: 20px}

.single ol,ul,p,h6,h5,h4,h3,h2,h1 {text-align: left;}

.single .link p {Text-Align: center;}
.info {Text-Align: center;}
.single .quote {padding-top: 50px;}
.quotes {
text-align: left;
padding-top: 5px;
    font-size:32px;
    color:#666;
line-height: 25px;
}

..quotes a:hover { -webkit-transition:all 0.2s ease-in-out; color:{color:Hover};}
.long_quote {font-size: 24px; line-height: 10px; padding-bottom: 10px}
.medium_quote{font-size: 28px; line-height: 25px; padding-bottom: 10px}
.short_quote {font-size: 32px; line-height: 35px; padding-bottom: 10px}
.source {right: 0; padding-top: 10px}

.nav {color: {color:nav};padding: 20px 0px; width: 780px;}

.navleft,.navright {display: block;}

.date,.meta { margin:10px 0 10px 0;  height: 10px;}

.date,.navright a { float:left; height: 10px;}

.meta,.navleft a {
    float:right; height: 10px;}

.singlebottom {height: 50px;}


.navpost {padding-top: 30px; width: 800px; height: 30px;}

.caption {width: 500px; margin:0 auto;
    text-align: left; padding:20px 0;
}
.push {height:25px; padding-top:25px;}

.clear {clear:both}

.footer {font-size: 10px; text-align: center; font:12px georgia,"times new roman",times,serif;
padding-bottom: 20px;}
.question {font-size: 30px}
.tumblrAutoPager_page_info {display: none;}

.overlay {width:250px; height:300px; position:absolute; z-index:999;}

@media screen and (max-device-width: 1024px) {}

{CustomCSS}
</style>
</head>
<body>


<div id="container">
     <div id="title"><a href="/"><h1>{Title}</h1></a>{block:IfDescription}
<p id="description">{Description}</p>
     {/block:IfDescription}</div>
    

<div class="links">
{block:HasPages}{block:Pages}
<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
{block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}

{block:ifShowRandomLink}<a href="/random">{lang:Random}</a>{/block:ifShowRandomLink}

{block:ifCustomLinkTitle}<a href="{text:Custom Link URL}">{text:Custom Link Title}</a>{/block:ifCustomLinkTitle}

</div><div class="clear"></div>
<div class="main">

{block:Posts}
{block:PermalinkPage}
<div class="date">{block:Date}<a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>{/block:Date}</div>
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{block:ReblogParent}

{/block:ReblogParent}



<div class="meta">
            <a href="{Permalink}#notes">{NoteCountWithLabel}</a><br />
            </div><!--/meta-->
{/block:PermalinkPage}

<div class="{block:IndexPage}post {/block:IndexPage}{block:PermalinkPage}single{/block:PermalinkPage}">
{block:Text}
<!-- TEXT -->
   <div class="text">
   {block:Title}
      <h1><a href="{Permalink}">{Title}</a></h1>
   {/block:Title}
   {Body}
   </div>
{/block:Text}

{block:Quote}
<!-- QUOTE -->

<div class="quote">
<a href="{permalink}"><p class="quotes"><span class="{Length}_quote">{Quote}</span></p></a>
{block:Source}<span class="source"><cite>— {Source}</cite></span>{/block:Source}



</div>
{/block:Quote}

{block:Link}
<!-- LINK -->
<div class="link">
<h1><a href="{URL}">{Name}</a></h1>
{block:Description}
<span class="linkdescription">{Description}</span>
{/block:Description}
</div>
{/block:Link}

{block:Video}
<!-- VIDEO -->
<div class="video">
{block:IndexPage}{Video-250}{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}
<div class="caption">{caption}</div>
</div>
{/block:Video}
{block:Photo}
<!-- PHOTO -->
<div class="photo">
<a href="{block:IndexPage}{permalink}{/block:IndexPage}{block:PermalinkPage}{LinkURL}{/block:PermalinkPage}">
<img src="{PhotoURL-400}" alt="{PhotoAlt}" style="opacity: 1;" />
</a>
{block:PermalinkPage}<div class="caption">{caption}</div>{block:PermalinkPage}
</div>
{/block:Photo}
{block:Photoset}
<!-- PHOTOSET -->
<div class="photoset">
{block:IndexPage}<a href="{permalink}"><div class="overlay" width="250px" height="300"></div></a>{/block:IndexPage}
{block:IndexPage}</a>
{Photoset-250}</a>{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
<div class="caption">{caption}</div>
</div>
{/block:Photoset}

{block:Conversation}
<!-- CONVERSATION -->
<a href="{permalink}">
          {block:Title}<h2>{Title}</h2>{/block:Title}
          <p>
          {block:Lines}
          {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
          {/block:Lines}
          </p>
        {/block:Conversation}
</a>
{block:Audio}
<!-- AUDIO -->
<div class="audio">
{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}" class="artwork"/></a>{/block:AlbumArt}
<span class="player">{AudioPlayerWhite}</span>
{block:ExternalAudio}
<p><a href="{ExternalAudioURL}">Download this
audio clip.</a></p>
{/block:ExternalAudio}
{block:Artist}
<p class="info">{Artist} -{/block:Artist}{block:TrackName} {TrackName}{/block:TrackName}</p>
{block:PermalinkPage}{block:Caption}
<a href="{Permalink}"><div class="caption">{caption}</div></a>
{/block:Caption}{/block:PermalinkPage}
</div>
{/block:Audio}

{block:Answer}
<div class="answer">
<h1 class="question"><a href="{Permalink}">Question:</a></h1>
<h1>{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{Question}{block:IndexPage}</a>{/block:IndexPage}</h1>
<p class="askedBy">Asked By: {Asker}</p>
<h1 class="question"><a href="{Permalink}">Answer:</a><h1>
{Answer}
</div>
{/block:Answer}
{block:IfNotes}
{block:IndexPage}<div class="bottom">

<div class="date">{block:Date}<a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>{/block:Date}</div>

<div class="meta">
            <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
            </div><!--/meta-->
</div><!--/bottom-->
{/block:IndexPage}
{/block:IfNotes}
</div><!-- end post -->

{block:Posts}

        <div class="clear"></div>

{block:IfNotEndlessScrolling}{block:Pagination}
<div class="nav">
        {block:PreviousPage}
        <div class="navright" style="text-transform:lowercase;">
          <a href="{PreviousPage}">{lang:Previous}</a>
        </div>
        {/block:PreviousPage}
        {block:NextPage}
        <div class="navleft" style="text-transform:lowercase;">
          <a href="{NextPage}">{lang:Next}</a>
        </div>
        {/block:NextPage}

        <div class="navcenter">
        </div>
</div>
        {/block:Pagination}
{/block:IfNotEndlessScrolling}

        {block:PermalinkPagination}
        {block:PreviousPost}
<div class="navpost">
        <div class="navleft" style="text-transform:lowercase;">
          <a href="{PreviousPost}">{lang:Previous post}</a>
        </div>
        {/block:PreviousPost}
        {block:NextPost}
        <div class="navright" style="text-transform:lowercase;">
          <a href="{NextPost}">{lang:Next post}</a>
        </div>
        {/block:NextPost}
</div>
        {/block:PermalinkPagination}
        <div class="clear"></div>
{block:PermalinkPage}
{block:IfDisqusShortname}
                <div id="disqus_thread" class="content"></div>
                <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
                {/block:IfDisqusShortname}

        
        {/block:PermalinkPage}

<div class="footer">
<a href="http://www.tumblr.com/theme/20885">White Tree House Theme</a> by <a href="http://blog.samportillo.com/">SamPortillo</a> - Powered by <a href="http://tumblr.com/">Tumblr</a></div>
</div><!-- end main -->
<div class="push"></div>
</div><!-- end container -->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/n2yg7bp/gJjkq6rfn/all.js"></script>
<!-- Disqus -->
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
    var links = document.getElementsByTagName('a');
    var query = '?';
    for(var i = 0; i < links.length; i++) {
    if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
    }
    }
    document.write('<span><script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
<!--/Disqus-->
<!-- Google Analytics -->
{block:IfGoogleAnalytics}
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '{text:Google Analytics}']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  
  

</script>
{/block:IfGoogleAnalytics}
<!--/Google Analytics -->
<!-- Endless Scrolling -->
{block:IfEndLessScrolling}
<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>
{/block:IfEndLessScrolling}
<body>
</html>


This post has been edited by pandy: Mar 1 2012, 03:55 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 1 2012, 02:51 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I can't make anything out of the code you posted, as it's Tumblr code, of which I know nothing.

But the effect from lifeandtimes.com resembles these examples:
- http://tympanus.net/codrops/2012/01/09/fil...lity-with-css3/
- http://tympanus.net/codrops/2011/11/02/ori...ects-with-css3/

I'm not sure if you can do that in Tumblr.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 09:43 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC