Expanding the borders of a div while hovering using bootstrap styling

Looking to add a hover border around only the edges of a div? Check out this grid layout I created using bootstrap. You can view the code on my CodePen.

<div class="product-grid col-md-4">
  <a class="preview" href="#">PREVIEW</a>
</div>

.product-grid{
  margin:30px 0 0 30px;
  border:1px solid #ccc;
  height:300px;
  display:block;
}
.product-grid:hover{
  border:1px solid #000;
}
/* Preview */
.preview {
  opacity: 0;
  position: absolute;
  left: 40px;
  right: 40px;
  top: 0;
  height: 30px;
  line-height: 32px;
  background-color: #fe3;
  text-align: center;
  text-decoration: none;
  color: #000;
  transition: .2s;
}

.product-grid:hover .preview {
  opacity: 1;
  top: 80px;
}

To help clarify, I've included a sample image below:

https://i.sstatic.net/3xfj2.png

htmlcsstwitter-bootstrap-3

Answer №1

To achieve a similar effect, the best approach is to utilize CSS3. I was able to accomplish this by incorporating <svg> in the following manner:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <line class="top" x1="0" y1="0" x2="900" y2="0" />
            <line class="left" x1="0" y1="460" x2="0" y2="-920" />
            <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />
            <line class="right" x1="300" y1="0" x2="300" y2="1380" />
</svg>

You can view the demonstration on my JSFiddle, which should give you an idea of what it looks like. This method should work well for your needs.

If you wish to make any further customizations, simply adjust the CSS accordingly to suit your preferences.

Source: tympanus

Answer №2

Would you mind giving this a shot?

#box1 {
    position: relative;
    height: 120px;
    width: 120px;
    background-color: white;
    border: 1px solid transparent;
}

#box2 {
    position: absolute;
    top: -4px;
    left: -4px;
    height: 100px;
    width: 100px;
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 15px;
}

#box1:hover {
    border: 2px solid red;
}

Check out the DEMO here

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

Updating Github pages requires clearing the cache first

As I work on my first website using GitHub pages, I've noticed that it can be frustrating to constantly clear the cache or open an incognito window whenever I add something new. I'm thinking about incorporating Jekyll into my workflow so I can t ...

htmlgithubgithub-pages

Ensure that the bottom border of the nav-item is in line with the

Is there a way to make the bottom border of a bootstrap nav item align perfectly with the bottom border of the navbar? My goal is to use the bottom border as an indicator for the selected element. I managed to achieve this with the default height of the na ...

htmlcsstwitter-bootstrapbootstrap-5

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

javascripthtmlcssvariablesfrontend

Stop the button from spanning the entire width of its container

Utilizing the Material UI button in my application with customizations as styled-components, I encountered an issue where setting the size="small" prop on the button caused it to only take up the width of the button text with some padding. This behavior pe ...

cssreactjsflexboxmaterial-uistyled-components

Split the text on the left side before disrupting the flow on the following line

I recently encountered an issue with my code: https://jsfiddle.net/qchtngzf/1/ When the browser window is too narrow, the div.right text gets pushed onto a new line. Ideally, I would like the div.left text to shrink and break onto a new line instead, whil ...

htmlcss

Unable to retrieve the iframe variable from the parent as it returns undefined

I am trying to retrieve a variable within an iframe from the parent index.html. Here is the index.html code: <!doctype html> <html lang="en-us> <head> <title>Test</title> </head> <body> <p>Test& ...

javascripthtmliframe

Incorporating an icon into a Bootstrap tab

I have encountered a minor issue while trying to include an icon in a bootstrap tab, resulting in some styling problems. In need of a CSS resolution that satisfies the following criteria: The icon must be aligned to the right of the link. The icon canno ...

htmlcsstwitter-bootstrap

Ways to create a sequential appearance of elements through CSS animations

Can you help me achieve a wave effect for elements appearing one by one using CSS animation (jQuery)? Currently, all the elements show up at once and I want to create a wave-like motion. Any assistance would be greatly appreciated. $(window ...

javascriptjquerycss

Integrating external JavaScript widgets into the web application in real-time

I am currently engaged in a React js project that involves the dynamic addition of third party scripts (widgets) to the web app. These widgets encompass various third party platforms such as Twitter, Instagram, Youplay, Youtube, and more. The existing co ...

javascripthtmlreactjs

Guide on using selenium webdriver (python) to choose, replicate, and insert all content within an element

Currently, I am faced with the task of transferring data from website A to website B as website A is soon going down. This includes not just text, but also images, hyperlinked text, and certain formatting requirements. Previously, the data transfer was don ...

pythonhtmlpython-3.xseleniumcopy-paste

Is there a way to conceal the loading screen until the website has completely loaded?

I've been working on my personal portfolio/website and encountered a bug that I can't seem to fix on my own. The issue is with the logo (aa) and text under it showing even after the content page has fully loaded, taking around 3 seconds to hide. ...

javascriptjqueryhtmlcss

The top margin is experiencing issues and is not functioning correctly

I'm struggling to identify the problem with this script: http://jsfiddle.net/AKB3d/ #second { margin-top:50px; ... } My goal is to have the yellow box positioned 50px below the top border of the right box. However, every time I add margin-top to ...

htmlcss

Utilizing "beneath the scroll" on a bootstrap 5.1 webpage

I have a website built with Bootstrap and I am looking to implement a "below the flow" positioning for the footer, preferably using CSS. I have been referring to it as "below the fold," although I'm not sure if that is the correct terminology to use. ...

htmlcssbootstrap-5

What is the best way to align two round buttons on each line with a single button centered above them, all without any spacing between the buttons below, and vice versa

https://i.sstatic.net/oOwY6.png Is it possible to align the buttons on the left side like they appear on the right? Each group should have padding and display with flow-root. .group { display: flow-root; padding: 7px 0px 7px 0px; } button.a { ...

htmlcssbuttoncss-selectorscenter

Removing the dividing line between columns in an Antd table: A simple step-by-step guide

Do you notice the lines dividing each table column heading in the image? I want to get rid of these lines from the table. The table component I am using is Antd table. https://ant.design/components/table#examples https://i.stack.imgur.com/Npx5G.png ...

cssreactjsantdant-design-proant-design-vue

Simplified jQuery function for multiple div mouseover operations

Uncertain about the accuracy of my title. Due to certain reasons, I need to assign different IDs for the class, as it only detects ID and not class when hovered over. Therefore, I have created a CSS version where the opacity of a specific div will change t ...

javascriptjquerycsshovermouseover

Setting up the frontend and backend with Apache HTTP Server

I am still exploring the world of web development and trying to grasp the inner workings of it all. Currently, I have a remote Debian server with the domain www.example.com. This server hosts a java application running as a daemon process on port 4321. Ad ...

javahtmllinuxapachehttpserver

Organizing files on a website for collaborative projects involving multiple team members

I am currently constructing a website with the following specifications: Pages are being loaded inline via AJAX. CSS, HTML, JavaScript, and PHP are all separated to facilitate collaboration on projects. While working on creating a dynamic <select> ...

javascriptphpjqueryhtmlajax

When using a CSS background image in ReactJS, a white space may appear at the bottom of the window

Currently, I am working on creating a background for a React website and implementing it in the div above component. My purpose is to have this background only appear on specific components and not throughout the entire website. However, I am encountering ...

cssreactjsbackground-imageresponsive-images

Unable to automate tests with file uploads

In my automated tests, I have consistently used the same function to upload files: var path = require('path'); //the file to upload fileToUpload, //this is variable that inserts the path to find file to upload ...

htmlangularjsselenium-webdriverautomated-testsprotractor