CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eddie Maiale
Eddie Maiale

Reputation: 67

How to expand this circle to fill the screen with transition?

I am currently working with HTML + CSS and I am having issues with expanding the circle to fill the screen. I know that the structure is odd but I needed the circle to be in a specific spot (it is technically part of the logo).

This is basically what I would like: http://jsfiddle.net/frapporti/85qfu/Code

but this is what I have currently: https://jsfiddle.net/IaZoro/ou9vwovr/Code

The goal is to have this red dot fill the screen, create a CSS slideshow overtop, and then an "x" at the top right will "close" (or hide) everything.

If at all possible I would like to keep using only CSS to create this effect, but if needed I can use Javascript/Jquery Any help is very much appreciated, thank you!

EDIT: I figured out why my javascript wasn't working correctly, I was using jQuery whereas the demo mentioned above was using Zepto.js.

Still having issues but figured I would mention this.

Upvotes: 2

Views: 2138

Answers (1)

Thapedict
Thapedict

Reputation: 383

Hope I understood yo correctly. I tried to make this as clear as possible. This is how I would do it:

HTML:

<body>
    <div id="main-wrapper">
        <div id="inner-wrapper">
            <div id="close-box"></div>
            <div id="slideshow-wrapper">
                <img class="shown" src="http://i.imgur.com/XeBydh2.png" />        
                <img src="http://i.imgur.com/xy1Aqbn.jpg" />       
                <img src="http://i.imgur.com/i7elQhu.jpg" />
            </div>
        </div>
    </div>
</body>

CSS:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

/* you can position the main-wrapper on top of your logo to get the required outcome */
#main-wrapper {
  background: red;
  border-radius: 50%;
  overflow: hidden;
  height: 100px;
  width: 100px;
  transition: all .5s;
  position: absolute;
  top: 50%;
  left: 50%;
}

#inner-wrapper {
  margin: 30px;
  border: 1px solid;
  position: relative;
  display: none;
}

#close-box {
  background-color: black;
  border: 2px solid white;
  position: absolute;
  top: -10px;
  right: -10px;
  height: 30px;
  width: 30px;
}

#slideshow-wrapper img {
  display: none;
}

#slideshow-wrapper img.shown {
  display: block;
  /* you can add cool animations/transitions here for when the image is shown */
}

#main-wrapper.shown {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  border-radius: 0;
}

#main-wrapper.shown #inner-wrapper {
  display: block;
}

JavaScript:

$(function() {
    $('#main-wrapper').click(function() {
        $(this).toggleClass( 'shown' ); // toggle hiding and showing
    });
    // making the close-box work as expected
    $('#close-box').click(function(){
        $('#main-wrapper').removeClass('shown');
    });
    // we don't want to close unnecessarily
    $('#inner-wrapper').click(function(e){
        e.stopPropagation(); //
    });
    $('#slideshow-wrapper').click(function(){
        /*
         * Note: You might have noticed I use the shown class to hide and show items.
         * This gives me the ability to add other cool features like adding other cool CSS animations for your transitions
         */
        var current = $(this).children('.shown');
        current.removeClass('shown'); // hide current slide

        var next = current.next();
        if(next.length < 1) // if current was last, set next to be first child 
            next = $(this).children().eq(0);
        next.addClass('shown'); // show next slide
    });
});

Please don't forget to load jQuery...

Upvotes: 1

Related Questions