Make items pop out when hovered over

Keryth987
Keryth987

I've seen this on Bortas' new site, and was trying to email him when OP acted up on me, so, I'm coming to the forums instead.

Trying to make my PC listing on the main page jump out when the image is hovered over. Here's what I got that doesn't seem to be working


/* HOVER TRANSITION */
#sidebar .sidebar-party-members.module {overflow:hidden; transition:transform 0.3s ease-out; height:auto; transform:scaleY(1); transform-origin:top; }
#sidebar .sidebar-party-members.module.collapsed {transform:scaleY(0);}

Any help would be greatly appreciated

Comments

  • Bortas
    Bortas
    Posts: 645

    Ive never played with the collapse tag, so I have no real knowledge about how that work. Any CSS trickery you see I only learned from OP - no wizardry here!

    Is it the character portrait you are trying to make jump out, or the user portrait (the one associated with the character they are playing, or the one associate with their user account)?

    The code for basic settings:


    .player-character, .player{transition: all .2s ease-in-out; position: relative;}
    .player-character img{ border-radius:15%; border: 1px solid; transition: all .2s ease-in-out;}
    .player img{ border-radius:15%; border: 1px solid;}
    .player-character .user-container {background-color: transparent;}
    .player-character .user-container img{ z-index:1; position: relative; bottom:21px; right:-10%; border-radius:15%; border:1px solid; box-shadow:0 3px 10px rgba(0,0,0,0.5); }

    The code for growing:


    .player-character:hover .user-container img {transform: scale(2); transform-origin: top right; z-index:3;}
    .player-character:hover, .player:hover {transform: scale(1.2); z-index:3;}

    The code snippets are for both. 

    Hrm. This post isn't helpful, sorry about that.

    -bort

  • Keryth987
    Keryth987
    Posts: 1,047

    Actually it was incredibly useful and does exactly what i wanted. Thanks so much

  • Bortas
    Bortas
    Posts: 645

    I like it! Makes the players behind the characters obvious only if the user is curious about them. But then... I admit bias.

    -bort

  • alex_redeye
    alex_redeye
    Posts: 85

    Nice stuff.

    Both of your sites are looking fantastic!

    -Red

    Campaigns: Dragon Age: Requiem

  • Keryth987
    Keryth987
    Posts: 1,047

    Now if I could just figure out how to apply it to all the buttons on my site, wihtout having to redo EVER SINGLE Page :)

    Suppose this is the price I pay for the site having eben intially created before the CSS was even implemented and my remaining old school on that point.

  • Bortas
    Bortas
    Posts: 645

    I'm terrible at direct css, so I'm just going to spitball an idea: you might try applying a setting to all links, then exclude out the links in #main-content (because it annoyingly messes with lines of text).

    -bort

  • Keryth987
    Keryth987
    Posts: 1,047

    How do I apply a setting to all links? Example please? :)

    and exclude the links in #main-content???

    My CVSS skills are seriously lacking aside from borrowing and sometimes, rarely, figuring something out

     

     

  • Bortas
    Bortas
    Posts: 645

    I'm sorry to say I don't know the exact code, I just have an idea. I tried messing with it some this morning, but... alas... I'm pretty basic with my CSS knowledge. I cut & paste and slightly modify pretty decently, though. Sorry Keryth :-/

    -bort

  • alex_redeye
    alex_redeye
    Posts: 85

    I've used CSS exclusions in some of my CSS actually, here is an example of it:


    /* LOOK PUSHED ON CLICK */
    a:not(.corner-add-button):not(.close-reveal-modal):not(.alert-button):not(.change-avatar-button):not(.edit-icon):active {
    position:relative;
    top:1px;
    }

     

    -Red

    Campaigns: Dragon Age: Requiem

  • Keryth987
    Keryth987
    Posts: 1,047

    Well, Alex, you site opens a whole new can of worms regarding 'How'd you do that?" questions :)

  • Bortas
    Bortas
    Posts: 645 edited March 2018

    I know, right? I thought Morwindl Season 1 was looking pretty good, then Red joined the community, and I was blown away. Gave a whole new bunch of thinks to slave over. His Dragon Age site is top notch.

    -bort

    Post edited by Bortas on
  • Johnprime
    Johnprime
    Posts: 252

    Agreed that Alex's site is really great, but both of your sites, Morwindl and Shadows Over New York have some really great visual features too guys! Don't sell yourselves short!

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • Bortas
    Bortas
    Posts: 645

    Morwindl 2 has really come along, especially when compared to my first go of it. Thanks for noticing ;-)

    -bort

  • Keryth987
    Keryth987
    Posts: 1,047

    Thanks for the compliment Johnprime. Always nice to know my hard work is appreciated. However, in my opinion, no site is ever truly finished. Always places to tweak here and there.

  • alex_redeye
    alex_redeye
    Posts: 85

    Thanks very much for the compliments all, but I agree with Johnprime that you shouldn't sell yourselves short by any stretch.  I just fiddle like anyone else and try to see what actually works here and what doesn't (or at least, I should say, that is what I did when I was still active).  It was nice to see that the :not pseudo class worked, to be sure, since it opens up a few more options to mess about with in your approach.

    And Keryth, that is the mind of a designer/developer right there.  Just don't get to a point where it becomes a bane and keeps you from appreciating what you've accomplished (or enjoy making use of it) - a potential pitfall many stumble into.  You've got yourself a pretty slick page going on.

    Bort, your Morwindl 2 is simply outstanding to be completely frank.  I've found myself trolling over it just looking at some of the awesome stuff you've worked out on there.  Keep up the amazing work, it is always a pleasure to check it out.

    Now, back off to the shadows with me - I've got tons of work to do still to make deadlines!

    -Red

    Campaigns: Dragon Age: Requiem

  • Keryth987
    Keryth987
    Posts: 1,047 edited March 2018

    Oh I hear ya and agree @alex_redeye. I will admit that I do wish I had somehow saved a copy of Shadows, before I redid it into its current incarnation, however, I think this version is superior to the one I originally did.

    Now...Might I ask how you did your menu bar that is on your Wiki, your Update bar on your main page, as well as the "The Story", "The Code", and "Dragon Age" buttons? Cuz I'd really like to borrow that :)

    Post edited by Keryth987 on

  • alex_redeye
    alex_redeye
    Posts: 85

    Oh, absolutely I'd be willing to share.  Let me know if you need the HTML that goes with this as well:

    News Ticker


    /* NEWS TICKER */
    /* TICKER EFFECT */
    @-webkit-keyframes ticker {
    0% {margin-top: -4px;}
    25% {margin-top: -34px;}
    50% {margin-top: -64px;}
    75% {margin-top: -94px;}
    100% {margin-top: -4px;}
    }
    @-moz-keyframes ticker {
    0% {margin-top: -4px;}
    25% {margin-top: -34px;}
    50% {margin-top: -64px;}
    75% {margin-top: -94px;}
    100% {margin-top: -4px;}
    }
    @-ms-keyframes ticker {
    0% {margin-top: -4px;}
    25% {margin-top: -34px;}
    50% {margin-top: -64px;}
    75% {margin-top: -94px;}
    100% {margin-top: -4px;}
    }
    @keyframes ticker {
    0% {margin-top: -4px;}
    25% {margin-top: -34px;}
    50% {margin-top: -64px;}
    75% {margin-top: -94px;}
    100% {margin-top: -4px;}
    }

    /* CONTAINING BOX */
    .news {
    box-shadow:inset 0 -15px 30px rgba(0,0,0,0.4),0 5px 10px rgba(0,0,0,0.5);
    width:75%;
    height:30px;
    margin:20px auto;
    overflow:hidden;
    border-radius:4px;
    -webkit-user-select:none;
    padding:2px 1px 2px 0;
    }

    /* TARGET SMARTPHONES (PORTRAIT AND LANDSCAPE) */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    .news {
    width:100%;
    }
    }

    /* BOX TITLE SPAN */
    .news span {
    float:left;
    color:#fff;
    padding:3px;
    position:relative;
    border-radius:4px;
    box-shadow:inset 0 -15px 30px rgba(0,0,0,0.4);
    font:16px 'Source Sans Pro',Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -webkit-user-select:none;
    }

    /* TICKER LIST FORMAT */
    .news ul {
    float:left;
    padding-left:5px;
    -webkit-user-select:none;
    -webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    -moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    -ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    }

    .news ul li {
    line-height:30px;
    list-style:none;
    }

    /* LINK STYLE */
    .news ul li a {
    color:#fff!important;
    font:14px Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -webkit-user-select:none;
    }

    .news ul li a:hover {
    color:#fff!important;
    }

    /* PAUSE ON LIST HOVER */
    .news ul:hover {
    animation-play-state:paused;
    }

    /* OPTIONAL PAUSE ON SPAN HOVER */
    .news span:hover+ul {
    animation-play-state:paused;
    cursor:default;
    }

    /* BACKGROUND COLORS */
    .blue {
    background:#347fd0;
    }

    .blue span {
    background:#2c66be;
    }

    .red {
    background:#d23435;
    }

    .red span {
    background:#c22b2c;
    }

    .green {
    background:#699B67;
    }

    .green span {
    background:#547d52;
    }

    .magenta {
    background:#b63ace;
    }

    .magenta span {
    background:#842696;
    }

    .yellow {
    background:#eae672;
    }

    .yellow span {
    background:#d3cf67;
    }

    .navy {
    background: #1E2227;
    }

    .navy span {
    border-top-color: #161A1F;
    }
    /* END NEWS TICKER */

    Wiki Menu


    /* RIBBON MENU */
    .ribbon {
    display:inline-block;
    }

    .ribbon:after,.ribbon:before {
    margin-top:.45em;
    content:"";
    float:left;
    border:.7em solid #8b0000;
    }

    .ribbon:after {
    border-right-color:transparent;
    }

    .ribbon:before {
    border-left-color:transparent;
    }

    .ribbon a:link,.ribbon a:visited,.ribbon a:hover {
    color:#fff!important;
    text-decoration:none;
    float:left;
    height:1.89em;
    overflow:hidden;
    }

    .ribbon span {
    background:#8b0000;
    display:inline-block;
    line-height:1.89em;
    font-size:11.6px;
    padding:0 .6em;
    margin-top:.6em;
    position:relative;
    -webkit-transition:background-color 0.2s,margin-top .2s;
    -moz-transition:background-color 0.2s,margin-top .2s;
    /* Saf3.2+, Chrome */
    -ms-transition:background-color 0.2s,margin-top .2s;
    /* FF4+ */
    -o-transition:background-color 0.2s,margin-top .2s;
    /* IE10 */
    transition:background-color 0.2s,margin-top .2s;
    }

    .ribbon a:hover span {
    background:red;
    margin-top:0;
    }

    .ribbon span:before {
    content:"";
    position:absolute;
    top:2em;
    left:0;
    border-right:.5em solid #9B8651;
    border-bottom:.5em solid #8b0000;
    }

    .ribbon span:after {
    content:"";
    position:absolute;
    top:2em;
    right:0;
    border-left:.5em solid #9B8651;
    border-bottom:.5em solid #8b0000;
    }
    /* END WIKI* /

    Hover Magic


    /* IMAGE HOVER MAGIC */
    .view {
    width: 48%;
    max-width: 300px;
    min-width: 200px;
    height: 200px;
    margin: 10px 10px;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    -webkit-box-shadow: 8px 8px 6px -6px black;
    -moz-box-shadow: 8px 8px 6px -6px black;
    box-shadow: 8px 8px 6px -6px black;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
    }

    .view .mask, .view .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
    }

    .view img {
    display: block;
    position: relative
    }

    .view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.8);
    margin: 10px 0 0 0
    }

    .view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 10px 5px;
    text-align: center
    }

    .view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
    }

    .view a.info:hover {
    box-shadow: 0 0 5px #000
    }

    .view-tenth img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
    }

    .view-tenth .mask {
    background-color: rgba(255, 231, 179, 0.3);
    transition: all 0.5s linear;
    opacity: 0;
    }

    .view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
    }

    .view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
    }

    .view-tenth a.info {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
    }

    .view-tenth:hover img {
    transform: scale(10);
    opacity: 0;
    }

    .view-tenth:hover .mask {
    opacity: 1;
    }

    .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info {
    transform: scale(1);
    opacity: 1;
    }

    .floatLeft {
    float: left;
    clear: left;
    }

    .floatRight {
    float: right;
    clear: right;
    }

    /* TARGET SMARTPHONES (PORTRAIT AND LANDSCAPE) */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    .floatLeft {
    float: none;
    margin-left: auto;
    margin-right: auto;
    }
    }
    /* END IMAGE HOVER */

     

    -Red

    Campaigns: Dragon Age: Requiem

  • Johnprime
    Johnprime
    Posts: 252

    @alex_redeye Thanks for posting your CSS. I'll be looking through it to be sure!

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • alex_redeye
    alex_redeye
    Posts: 85

    Fun fact - if you're on my DA page you can search for CSS and it will net you some handy information.

    -Red

    Campaigns: Dragon Age: Requiem

  • Keryth987
    Keryth987
    Posts: 1,047

    @Alex_Redeye

    Thanks for the CSS share. And yes, if you could provide the requisite HTML that would be fantastic

  • alex_redeye
    alex_redeye
    Posts: 85

    For the ticker you can actually nab that HTML right off my site - if you go to the CSS page there is a link to a "Formatting Test" (or something similar) page that includes the HTML for that.  That will help keep this post smaller than the last one with the CSS.

    For the Wiki Menu, you'll want to use this (replace things as needed with your own content):


    <div class="ribbonTimeline"><span class="text-center interlink"><a href="/wikis/creatures">Creatures</a> | <a href="/wikis/magic-and-religion">Magic & Religion</a> | <a href="/wikis/history">History</a> | <a href="/wikis/places">Places</a> | <a href="/wikis/groups">Groups</a> | <a href="/wikis/songs">Songs</a> | <a href="/wikis/notes">Notes</a> | <a href="/wikis/mechanics">Mechanics</a></span></div>

    For the "Hover Magic" images, here is the HTML you'll need:


    <div class="view view-tenth floatLeft">
    <img src="//db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/423351/book-open.jpg" />
    <div class="mask">
    <h2>The Story</h2>
    <p>Return to Thedas in the Age's next epic chapter.</p> <a href="/adventure-log/welcome-to-your-campaign" class="info">Read More</a>
    </div>
    </div>

    With that Hover Magic the principle is the same on each one of them, as you can see it is pretty easy to change up the text and images involved in it.

    -Red

    Campaigns: Dragon Age: Requiem

  • alex_redeye
    alex_redeye
    Posts: 85

    Well, damn, that really jacked the hell out of the HTML code.  And the edit post function doesn't help either...

    Alright, we'll try this again.  First is the Wiki Menu, then the Hover Magic


    <div class="ribbonTimeline"><span class="text-center interlink"><a href="/wikis/creatures">Creatures</a> | <a href="/wikis/magic-and-religion">Magic & Religion</a> | <a href="/wikis/history">History</a> | <a href="/wikis/places">Places</a> | <a href="/wikis/groups">Groups</a> | <a href="/wikis/songs">Songs</a> | <a href="/wikis/notes">Notes</a> | <a href="/wikis/mechanics">Mechanics</a></span></div>

    <div class="view view-tenth floatLeft">
    <img src="//db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/423351/book-open.jpg" />
    <div class="mask">
    <h2>The Story</h2>
    <p>Return to Thedas in the Age's next epic chapter.</p> <a href="/adventure-log/welcome-to-your-campaign" class="info">Read More</a>
    </div>
    </div>

     

    -Red

    Campaigns: Dragon Age: Requiem

  • alex_redeye
    alex_redeye
    Posts: 85

    Ok - so I can't seem to figure out how to post HTML to this forum without it garbling the hell out of it.  If anyone knows what I need to do so it doesn't jack it up let me know and I'll drop the code here.

    -Red

    Campaigns: Dragon Age: Requiem

  • Johnprime
    Johnprime
    Posts: 252 edited March 2018

    What you posted works fine, just have to drop it into a development tool and do a find replace! Find &lt; and replace with <.

    What I posted worked.

    What I tired to get the HTML tags to show didn't work. So I'm not sure what you can do for that. If I get some time I'll experiment some more!

    Post edited by Johnprime on

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • Keryth987
    Keryth987
    Posts: 1,047

    OK, so, playing around wiht the code Alx shared, on a test site of course. Anyhow, got the Update ticker mostly working. Jus tneed to figure out how to center it vertically in the box.

    Test Site: https://test-testing.obsidianportal.com/

  • Bortas
    Bortas
    Posts: 645

    Awww, not public :(

    -bort

  • Keryth987
    Keryth987
    Posts: 1,047 edited March 2018

    oops. Should be public now. Sorry. Also trying to figure why the menu bar is screwed up...

    Post edited by Keryth987 on

  • Bortas
    Bortas
    Posts: 645

    Its not settings > style > collapse front page menu, is it?

    -bort

  • Bortas
    Bortas
    Posts: 645

    I'd considered doing it for a long time, I finally stole Alex's sweet little ticker plan. Sorry not sorry ;-)

    -bort

  • alex_redeye
    alex_redeye
    Posts: 85

    Well, I'm glad it is getting some use around these parts.

    -Red

    Campaigns: Dragon Age: Requiem

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions