Is there a way to make only the rhombus image respond to hover events? I want to exclude the transparent area, as shown in this picture.
<img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first">
#first:hover {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
It is not possible to achieve a non-rectangular bounding box with a normal image. You may have some success by using an SVG element instead of the <img> tag, but keep in mind that any styles, like box shadows, will be applied to the rectangular box and not the actual shape of your image.
Why not create your own unique rhombus shape instead of using an image and then add a hover effect to it like the example below
Check out the FIDDLE DEMO here
<div id='container'>
<div id='diamond'></div>
</div>
CSS
#diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;
position: relative;
top: -100px;
}
#diamond:after {
content:'';
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: red;
}
#diamond:hover {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
#container {
width:200px;
height:200px;
border:3px solid;
}
I hope this solution meets your needs!
Here is the CSS code:
a {
display:block;
height:165px;
width:165px;
background:transparent;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform: rotate(45deg);
text-align: center;
margin: 37px;
}
.bg {
position: absolute;
background:url('http://s30.postimg.org/xpd6gwla9/1_Copy.jpg');
background-repeat: no-repeat;
height: 300px;
}
This is the HTML code:
<div>
<div class="bg">
<div><a href="#"></a></div>
</div>
</div>
I am attempting to store attachments in RavenDB, but I keep encountering a "file not found" error. Here is the code snippet from my MVC View: <input type="file" name="file" id="Ids2" style="float:right"/> Through an AJAX call, I send the selected ...
Has anyone been successful in changing the color of mat-divider? I attempted the following but had no luck: component.html <mat-divider class="material-devider"></mat-divider> component.scss .material-devider { color: red } ...
I'm currently working on my website's navbar menu and struggling to eliminate the gap between each of the navbar links. It seems that the li attributes with the class dropdown are slightly wider than the rest of the links, causing this issue. I&a ...
I need assistance with implementing HTMX in my FastAPI application that uses Tailwind and MongoDB for the database. Here is the form I am working with: <form id="currencyForm" hx-get="/currency_history_check/EUR" hx-target="#re ...
Within my application, there exists a multitude of div elements that share identical backgrounds and borders but vary in size. Having to utilize the same background image for each individual div proves to be highly inefficient, particularly in terms of ba ...
I am currently testing out different effects using the materializecss framework. My goal is to adjust the size of the image and content on a card when the user hovers over it, but I'm having trouble figuring it out. .card:hover .card-image { he ...
Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...
I am attempting to create a clickable URL that opens in a new window. The URL is being displayed and updated on my HTML page in the following manner: Python Code: def data_cb(): return jsonify(waiting=await_take_pic()) Javascript Code: jQuery(d ...
How can I smoothly transition a color as it ages using a dynamic time scale? I want to calculate the age based on the difference in time rather than triggering an animation after an event. I aim for a seamless gradient transition between two colors over a ...
This code is functioning in IE9: body.country-XYZ .abc:nth-child(3) { display:none; } As :nth-child() is effective in IE9 and newer versions, what can be done to ensure it also functions on IE8? Can you suggest an alternative method for achieving th ...
My goal is to create a webpage where clicking on the carousel will center it on the page. A great example of this functionality can be seen on the Studio New Work website (). As I am still in the process of learning JQuery, I have not yet mastered all the ...
I am encountering an issue where the normal HTML img tag works perfectly fine inside my Masonry List. However, when I use the Next.js Image Component with a layout of fill, it fails to render anything. Custom Styles: const ImageList = styled('ul&apos ...
I am attempting to implement a tab concept on my website. For example, the tab names are Monday...Tue.. up to Sunday. Each tab contains an image file based on the days (size 460*620). When I run my page, it shows all images, but what I need is for the imag ...
I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...
Currently, I am delving into the world of javascript/jquery and I have set up an input field with a datalist. However, I am encountering a slight hurdle - I am unable to trigger an event when hovering over the datalist once it appears. Although I have man ...
Currently utilizing Wordpress, but I believe my inquiry pertains to any platform where users are granted frontend posting capabilities. I am interested in enabling users to customize the style of their posts, specifically limited to the description area. ...
I'm facing a challenge trying to blend a few elements together: My goal is to have two columns take up 100% of the browser width with a height that adjusts relative to this width. I want these columns to switch to one column when the viewport is sma ...
Can anyone assist me with minifying my css in this gulpfile.js for compiling css? I have tried multiple code snippets from the internet but none of them seem to work. Your help would be greatly appreciated. Thank you. var gulp = require('gulp&apo ...
Update: I've found the solution! list_c = [[x, y] for x, y in zip(titleList, linkList)] Initial inquiry: In my project to scrape a recipe website using bs4, I encountered a challenge where the titles and links were not directly paired. After extracti ...
After dabbling in web development for some time, I've come to realize that transferring data between an HTML form and a database can be quite challenging. My usual solution involves using an AJAX call to a PHP script, as illustrated in the image below ...