Is there a way to make a trio of buttons arranged in a flex column slide out to the left when hovered over using flexbox?

access the code example here

.container {
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.mainCont {
  display: flex;
  background-color: #f2f2f2;
  min-height: 5em;
  justify-content: space-between;
}

.btn-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 6em;
}

.allButton,
.onButton,
.offButton {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#circleAll {
  display: inline-flex;
  align-items: flex-start;
  background-color: blue;
  border-radius: 50%;
  width: .5em;
  height: .5em;
}
<!DOCTYPE html>

<head>
  <title>testpage</title>
</head>

<body>
  <div class="container">
    <!--main container-->
    <div class='mainCont'>
      <!--heading container-->
      <h3 id="twitchHead">TWITCH STREAMERS</h3>
      <div class="btn-group">
        <button class='allButton'><span id="circleAll"></span><span id="onAll">All</span></button>
        <button class='onButton'><span id="circleAll"></span><span id="on1">Online</span></button>
        <button class='offButton'><span id="circleAll"></span><span id="off1">Offline</span></button>
      </div>
</body>

Initially, only the blue circles should be visible. When a user hovers over one of them, it slides out left to reveal if it's an All/Online/Offline button. Only one should be visible at a time.

I have experience with sliding out and hover effects, but struggling to hide the buttons and text while displaying only the blue dot part when the mouse is not over it.

What would be the best way to achieve this effect?

jqueryhtmlcssflexbox

Answer №1

Here is a solution to achieve the task. Avoid using duplicate IDs and instead, switch circleAll to a class. Additionally, introduce classes like .btn and .text for better targeting. Customize further as needed and consider incorporating prefixed styles for Flexbox and transitions to ensure compatibility across various browsers.

.container {
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.mainCont {
  display: flex;
  background-color: #f2f2f2;
  min-height: 5em;
  justify-content: space-between;
}

.btn-group {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
}

.allButton,
.onButton,
.offButton {
  display: flex;
  align-items: center;
}

.circleAll {
  display: inline-flex;
  align-items: flex-start;
  background-color: blue;
  border-radius: 50%;
  width: .5em;
  height: .5em;
  margin-right: 0px;
  transition: margin-right .3s ease 0s;
}
.btn:hover .circleAll,
btn:focus .circleAll {
margin-right: 5px;
}
.text {
max-width: 0px;
overflow: hidden;
display: block;
transition: max-width .3s ease 0s;
}
.btn:hover .text,
.btn:focus .text {
max-width: 50px;
}
<div class="container">
  <!--main container-->
  <div class='mainCont'>
    <!--heading container-->
    <h3 id="twitchHead">TWITCH STREAMERS</h3>
    <div class="btn-group">
      <button class='allButton btn'>
        <span class="circleAll"></span>
        <span id="onAll" class="text">All</span>
      </button>
      <button class='onButton btn'>
        <span class="circleAll"></span>
        <span id="on1" class="text">Online</span>
      </button>
      <button class='offButton btn'>
        <span class="circleAll"></span>
        <span id="off1" class="text">Offline</span>
      </button>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When I click on something else, the dropdown doesn't automatically close

In my current setup, I have 3 dropdowns on the page. When I click outside of any dropdown, they are correctly closed. However, if one dropdown is already open and I click on another one, the previously opened dropdown remains open. I want all dropdowns to ...

javascripthtmlcssreactjsdrop-down-menu

Expanding rows in Angular UI-Grid: Enhancing user experience with hover functionality

Struggling to add a hover effect to the rows in an Angular UI grid. The goal is for the entire row to change background color when hovered over, but with an expandable grid that includes a row header, applying CSS rules only affects either the row header o ...

javascripthtmlcssangularjsangular-ui-grid

I am having trouble accessing the database. Jacky @ localhost Password: NO

https://i.sstatic.net/7Kvfu.png What is preventing me from accessing the database? Username: jacky @ local host Password: NO ...

pythonhtmlsqlflaskphpmyadmin

What steps should I take to keep a reference to a specific plugin instance following an AJAX callback?

When creating a plugin, I would like to trigger an AJAX call that retrieves data and then proceeds with building the plugin control. Here is a simplified example of what I have in mind: $.fn.grid = function (options) { this.each(function () { ...

jqueryjquery-plugins

Employ PHP to adjust the size of an image with the help of $_GET.REQUEST

Is there a way to resize an image on mouse hover using PHP with $_GET instead of CSS or JavaScript? I am looking for a method to achieve this without the need to upload a file. For example, if I have HTML code with an <img> tag and an image, how can ...

phphtml

Display images quickly when the mouse is hovering

I am looking to create a function that will flash images when the mouse hovers over them and then stop flashing when the mouse moves away. However, I am experiencing an issue where "flash_imgs" is being called every time there is a mouse movement over the ...

jqueryanimationsetinterval

What causes the content of a sticky navbar to overflow?

I have a situation where my navbar has two styles (.navbar and .navbar_fixed), but the links in the navbar are not fitting properly. I attempted to remove padding and add left: 0;, however, these adjustments did not work as expected. Any suggestions on how ...

htmljquerycss

What is the best way to verify the presence of # in a URL?

Every now and then, due to caching issues, I find myself adding a # to my URL, like so: http://www.example.com/#lang=3201954253 My goal is to find and remove the #lang from the URL if it is present. ...

javascriptjqueryurl

WordPress does not recognize the jQuery function

I have encountered an issue with my code where a simple HTML jQuery slider works fine in a standalone file, but when I integrate it into WordPress, it no longer functions properly. The slider is being added to the index.php file by hardcoding the script li ...

javascriptphpjqueryhtmlwordpress

Utilizing background image CSS class repetitively

I have a button background class that I want to reuse multiple times. How can I keep all the common styles separate and only change the URL multiple times? Here is my CSS: .menuBtnColour{ position: relative; //common top: 0;//common left: 0;/ ...

htmlcss

retrieving the current value of a variable from a jQuery function

I've done my best to keep things simple. Here's the HTML code I've put together: <div id="outsideCounter"><p></p></div> <div id="clickToAdd"><p>Click me</p></div> <div id="in ...

javascriptjquery

Utilizing the Masonry jQuery plugin for optimizing empty spaces

Recently, I came across the Masonry plugin and I'm considering using it in a project. One question that intrigues me is whether there is a way to detect empty spaces that occasionally show up in the layout when divs are positioned. Being able to ident ...

javascriptjqueryhtmlcssjquery-masonry

Manipulate SVG elements by dragging them along the boundary of the path

Looking to achieve a specific functionality where I can drag and drop an element along the edges of a drawn path, rather than inside the path itself. To clarify, the goal is to move the red marked element on the black line bordering the path, allowing move ...

javascriptjquerysvg

Tips on utilizing emmet effectively through copy and paste

When I have an emmet snippet like this one: .row>.col>(.row>.col.bg-sucess>br*2)+(.row>.col.bg-danger>br)+(.row>.col.bg-warning*3) and I paste it into my vscode from any source, it doesn't register as an emmet snippet. So I ofte ...

htmlvisual-studio-codebootstrap-4emmet

What is the best way to implement a secondary sticky navbar that appears on scroll of a specific section, positioned below the primary fixed-top navbar, using jQuery and Bootstrap 5?

I am facing a challenge with my webpage layout. I have a fixed-top navbar at the top, followed by 3 sections. The second section contains nav-tabs. What I want is for the nav-tabs navbar to stick to the top of the page below the fixed-top navbar when the u ...

javascripthtmljquerycssbootstrap-5

Is it possible to utilize one controller within another controller in angularjs?

I am interested in using the Angular JS scrollbar to display content. Here are the controllers I plan to utilize: module.controller('itemsCtrl', function($scope){ $scope.items = [ {src:'../static/images/image-3.png&apos ...

jqueryangularjsangularjs-controller

HtmlUnit implementation encounters an Exception while retrieving page source code

Attempting to retrieve a dynamic page from a URL while using Java has presented some challenges. Initially, Selenium was used for this task, but the process was time-consuming due to the driver invocation time. To overcome this, HtmlUnit was explored as it ...

javahtmlexceptionselenium-webdriverhtmlunit

Implementing a CSS stylesheet that is triggered when the user reaches the top of the webpage, and incorporating an

Currently, I have code that controls the hiding and showing of my navigation menu when a user scrolls up on the page. $.fn.moveIt = function(){ var $window = $(window); var instances = []; $(this).each(function(){ instances.push(new moveItItem($( ...

javascriptjqueryhtmlcss

What is React.js's approach to managing CSS files?

Currently, I am enrolled in Bootcamp at Scrimba where they utilize an online platform for teaching various courses. One of the topics covered is React and involves working with CSS files. When working on my local machine, I typically use the index.css file ...

javascripthtmlcssreactjs

Upgrading a bootstrap 3 class to bootstrap 4

Can someone help me update the classes col-sm-push-9 and col-sm-pull-3 from bootstrap-3 to bootstrap-4 in the HTML code below? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <titl ...

htmlbootstrap-4