I'm trying to implement a feature on my website where an overlay appears when a user hovers over their display picture.
However, I'm facing a challenge as I want the overlay to only cover half of the circle, not the entire photo.
After researching for solutions, I haven't been able to find one that fits my needs.
Here is a visual example of what I'm aiming for: https://i.sstatic.net/iJFca.jpg
Thank you in advance for any guidance on how to achieve this effect.
To achieve this effect, you can simply apply the CSS property overflow:hidden to the main container (in this case, a circle) and ensure that the overlay is only half the height of the circle. Here is a code snippet demonstrating this:
#circle{
width:150px;
height:150px;
border-radius:50%;
background-color:#ff5733;
position:relative;
overflow:hidden;
}
#overlay{
display:none;
position:absolute;
bottom:0;
text-align:center;
width:150px;
height:75px; /* Half of the circle's height */
line-height:75px;
background-color:rgba(0,0,0,0.3);
}
#circle:hover #overlay{
display:block;
}<div id="circle">
<div id="overlay">
Example
</div>
</div>In the parent div, the position:relative; and overflow:hidden; properties will be applied. The overlay will have position:absolute; with top:50%; (covering only the bottom half of the parent).
To achieve the desired effect :
Method One : Hide the .overlay with display:none; and display it using .con:hover .overlay with display:block;
Method Two: Initially place .overlay with top:100%; transition:top 0.5s; and on hover, change it to top:50%;. The transition property provides a slow animation effect.
Refer to the code snippet below for a demonstration using the second method. Font-awesome icons are used for visual elements.
.con{
width:150px;
height:150px;
border-radius:75px;
background-image:url("http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg");
background-size:cover;
overflow:hidden;
position:relative;
}
.overlay{
position:absolute;
top:100%;
left:0;
padding-top:10px;
text-align:center;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.5);
transition:top 0.5s;
}
.con:hover .overlay{
top:50%;
}
.overlay a{
margin:5px;
font-size:1.6em;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="con">
<div class="overlay">
<a><i class="fa fa-briefcase"></i></a>
<a><i class="fa fa-list"></i></a>
</div>
</div>Make sure to include overflow: hidden; in your code. For more details, you can refer to this jsfiddle link:
https://jsfiddle.net/3jdb1m7e/
I trust you will appreciate the use of transition.
<div class="img-box">
<img src="http://placehold.it/350x350" class="image">
<div class="img-content">
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/96-128.png" width="36px" height="36px" /></a>
<a href="#"><img src="https://cdn0.iconfinder.com/data/icons/internet-and-web-flat-icons-free/512/Menu_icon-128.png" width="36px" height="36px"/></a>
</div>
</div>
.img-box {
position: relative;
text-align: center;
display: block;
border-radius: 105px;
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid #333;
}
.img-box .image{
border-radius: 50%;
width: 100%;
}
.img-content {
padding: 40px;
background: #fff;
position: absolute;
bottom: -120px;
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
.img-box:hover .img-content{
bottom: 0px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
Is there a way to generate widgets from HTML scripts on a webpage? For example: <script type="text/html" id="widget-simple"> <div class="widget-simple"> This is my widget and its name is {{ test }} </div> </script> & ...
I am just starting out with using $.ajax and I'm not very familiar with it. I have a button that is meant to delete a user post based on the article ID provided. <button type="button" onclick="submitdata();">Delete</button> When this but ...
Here is a sample of my JQuery code: $(document).ready(function() { $(".neverseen img").click(function() { $(".neverseen p").slideToggle("slow"); return false; }); }); Below is the corresponding HTML: <div class="neverseen"> <h1> ...
My app was created using Quick flip 2, and I needed to resize it for mobile screens, so I implemented jquery-mobile. Here is the code snippet: <!--css--> <style> .quickFlip, .quickFlip3 { height: 350px; width: 400px; } .quickFlip2 { ...
Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...
Currently, I am utilizing C# to fetch continuous bitmaps (video) from an ipcamera. These bitmaps are then converted to base64string and sent (JSON) to an HTML5 canvas, which is responsible for rendering the images. During my research, I came across a meth ...
I'm in the process of creating a smart TV app that streams live content. The app functions properly when I provide it with a valid XML playlist. However, when I attempt to use PHP to generate the XML file (which generates without any issues), it fail ...
I recently completed a website project using Contao for a client (visit www.medivas.de). Everything is working perfectly except for one issue: the last menu item in the main navigation (located at the top, above the slideshow) is causing a line break. This ...
I recently set up a Vue landing page on my Mac. In the terminal, I navigated to the folder and executed "npm install" and "npm run dev", which ran without any issues. However, when trying to do the same on a managed server, I encountered challenges with t ...
Working with Express.js to build an API has been a game-changer for me. I've learned how to utilize middlewares, handle requests and responses, navigate through different middleware functions... But there's one thing that keeps boggling my mind, ...
I am trying to wrap HTML around an existing div, here is what I have attempted: HTML: <input type="text" data-placeholder="username" /> It should look like this when rendered: <div class="placeholding-input"> <input type="text" data-pl ...
When exporting to CSV, large strings are causing other cells to be rewritten. See the screenshot for the result of the export here. For the code related to this issue, refer to this link. The question is how to prevent large string values in a cell from a ...
There have been multiple discussions about encountering an error on an aspx web form page. The error message reads: "Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %& ...
I'm currently working on a Grid view with a checkbox and two textboxes. What I want is for the checkbox to be automatically checked whenever there is a change in one of the textbox values, for example switching from 0 to 1. This project is being devel ...
I have been trying to fetch HTML using code. It works perfectly fine when fetching from "http://www.google.com," but when attempting to fetch from "http://en.wikipedia.org/w/api.php," I am not getting any results. Any ideas on what might be causing this i ...
Looking to create a basic jQuery Ajax script that checks a user's discount code when the "Check Discount Code" button is clicked? Check out this prototype: <script> jQuery(function($) { $("#btn-check-discount").click(function() { c ...
CustomComponent.js:98 UI Error: The value undefined provided for the selection is out of range. Please make sure to select a value that matches one of the available options or ''. The available options are: `All`, `Software Development`, `Qualit ...
Attempting to find multiple index positions in an Array for a Boolean value. Experimenting with while and for loops to iterate through more than one index position without success so far. Below is the code snippet: let jo = [1,2,3,4,5] let ji = [1,2,3] ...
Every time I click the load more button, it is supposed to display 10 new results. However, the offset value does not update and as a result, I keep seeing the same set of 10 results repeatedly. $("#loadmore_timeline").on("click",functi ...
I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect. My goal is to create a similar functionality as shown in this video using just CSS if possible. I have successfully implemented it in Chrome wit ...