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>
When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...
My simple input in HTML/CSS works perfectly, but when I tried to automate the process by writing a JavaScript function to create multiple inputs, I encountered an issue. The input created with JavaScript is already considered valid (from a CSS ":valid" sta ...
I have a challenge with two dropdown menus. One contains names and the other subjects, along with a table displaying information in three columns: name, subject, and marks. I would like to implement a filter based on the selections in these two dropdowns. ...
I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, cli ...
Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...
I've been searching everywhere for a solution to my issue, but none of them seem to work. As someone new to CSS3 Animations, I appreciate your patience. I created a simple animation using CSS3 that functions perfectly in IE and Firefox, however, it ...
Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...
Currently, I am in search of a jQuery plugin that has the capability to navigate users to different pages on a website with a sleek sliding animation, similar to what we see in some widely used iPhone apps. Despite my best efforts to create this functional ...
Once users have submitted the basic information in a form, how can I ensure that the newly created userID is displayed in a hidden field on the header page? The initial form collects Name, Phone, and Email details. Upon submission, the 'userID' ...
I am struggling with displaying a default table row using jQuery. Specifically, I am using the remove() method to delete a table row, but I am unsure how to show a default row if there are no entries to display. Below is the code snippet in question: fu ...
this is my unique html content <ul class="dialogs"> {% if t_dialogs %} <li class="grouping">Today</li> {% for item in t_dialogs %} <li class=&qu ...
Having trouble checking a checkbox inside a table using Selenium Webdriver in Java? Even with version 2.52.0 of Selenium, the element not found error persists across different web browsers. The iFrame seems to be correct as I can interact with other compon ...
I am new to the world of HTML coding and currently working on an assignment for my online computer course. I reached out to my professor for help, but unfortunately, he hasn't been very responsive. The task at hand is to create a basic cost calculator ...
Greetings to all! I am currently managing a website filled with HTML content. I am looking to incorporate a search box into the site. After researching on Google, most of the results point towards using Google Custom Search. However, I require a search box ...
Recently, I dove into the world of Twitter Bootstrap 3 without any prior experience with earlier versions. It's been a learning curve, but I managed to set up a WordPress theme using it as the framework. All my elements are in place, but they all see ...
Scenario After coming across a thought-provoking XKCD comic, I decided to craft a script that would bring the comic's concept to life: javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+ ...
Looking to swap out DIV-A with DIV-B on a landing page after 10 seconds. After some research, it seems like JQUERY is the best option, but I'm unsure about how to proceed. Most solutions involve cycling through DIVs or replacing them on a button clic ...
I'm experimenting with chaining multiple -webkit-transition animations in my CSS without using keyframes. I understand it's possible to achieve this by calling a keyframe animation, but I prefer to simply overwrite the properties. However, for s ...
Looking for some help combining a logo and brand name in my Bootstrap navbar. I'm running into an issue where there is a line break separating the logo and text. Can someone provide some assistance? <%= link_to image_tag("brand_logo.png") + " Bran ...
Currently, I am working on creating a form that allows users to input a location and have the page redirect to that location after submission. However, I am facing difficulty in determining how to set the value for action="" when I do not know what the loc ...