Button Hover overlay

#1

Hello,

I am trying to create the hover effect for my local web page as illustrated in the image I created below:

Artboard%201
Artboard 1.png900x400 4.87 KB

The idea being that the button expands when the cursor is hovered over it and displays “sections” containing links to another web page?

Would somebody be able to point me in the right direction with this please?

#2

pure css or is JS also a possibility? Both can do the job. You will need to create a wrapper (this can be a div), to which you add the hover effect, then within the wrapper make the button, and a table with the 4 buttons you wish to have.

#3

Using only CSS, is it possible to make a table appear only when I hover over a button or the wrapper (div)?

#4

yes, css has a display property which we can set to none or block, none will hide something from view, while block will display a block.

there is also a :hover psuedo class in css, which should help you

#5 
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<style>
* {
	margin: 20px;
}

div {
	font-family: "Segoe UI";
	font-size: 24px;
	text-align: center;
	border: 2px solid black;
	float: left;
	cursor: pointer;
	transition-duration: 0.4s;
}

div:hover {
	padding-right: 30%;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
}

</style>
</head>

<body>

<div>
Sample Text
	<table>
		<tr>
			<th>Text1</th>
			<th>Text2</th>
			<th>Text3</th>
			<th>Text4</th>		
		</tr>
	</table>
</div>

</body>
</html>

Right, so in the above code. I have created an extremely basic hover-animated div tag where as displayed in the code, the div container will expand to the right by 30%. I have also added a table so now how can I proceed with so that it only appears after hovering over the container? Please forget about the button inside the div container as I am interested with that anymore.

Thank you for the code suggestion by the way but since I am quite new with this, I cannot seem to visualize how I can proceed with this.

#6

there is a display property in css:

https://developer.mozilla.org/en-US/docs/Web/CSS/display

which we give to the table css selector, then create a new css selector which can manipulate the table while we hover the div, see if you can figure this out. If not, let me know

in this newly created css selector, we could display the table

#7 
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<style>
* {
	margin: 10px;
}

div {
	font-family: "Segoe UI";
	font-size: 24px;
	text-align: center;
	border: 2px solid black;
	padding: 12px 24px;
	float: left;
	cursor: pointer;
	transition-duration: 0.4s;
}

#demo {
	display: none;
}

#demo2:hover #demo {
	display: inline-table;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
	font-family: "Segoe UI";
	font-size: 20px;
	text-align: center;
}

th, td {
    padding: 15px;
}

</style>
</head>

<body>

<div id="demo2">
Sample Text
<table id="demo">
		<tr>
			<th>Text 1</th>
			<th>Text 2</th>
			<th>Text 3</th>
			<th>Text 4</th>		
		</tr>
</table>
</div>

</body>
</html>

I have managed to get the outcome (please see the updated code above) where I have simply added two ids for the div and the table itself. I have got what I was after and I am happy with this but I want to give it some animation delay when the div container expands so that there is some smooth transition?

#8

nicely done :smiley: You can be proud of yourself :slight_smile:

transition is what you need:

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

But sometimes properties like transition are to new, so not supported across all browsers without prefix, so you should check here:

http://shouldiprefix.com/#transforms

to see if you should use prefix, and what browsers are supported. The browser support is also on MDN (mozzila developers network)

#9

Thank you for the information; I am still experimenting with my CSS code to see what I come up with. In terms of transitions however, I have not succeeded unfortunately as I am unable to work out what it is that I need to change?

After observing the code and making changes here and there, I was clever enough to discover that the real problem was how to get the animation from the display: none; to display: block; working? And I found out that it is seemingly quite tricky and not that straightforward with CSS.

I am still trying so I’ll see what I can do about this.

#10

It seems transition can’t handle display property. Okay, pity. I didn’t know. Then we need either @keyframes or we need to use jquery.

@keyframes are tricky, here is a good example:

but as you can see on the prefixes website, we only need animation and -wekit-animition, you can ignore the rest :slight_smile:

then use @keyframes to the fading effect, and transition effect to do the expanding/shrinking if you also want that animated. Good luck! :slight_smile:

#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.