Is it possible to add an inner line to all product images like shown in the example image?https://i.sstatic.net/EVIiM.png
The HTML code I have is as follows:
<div class="gallery">
<div class="picture">
<img id="main-product-img-43" src="//images/thumbs/0000072_25-virtual-gift-card_550.jpeg">
</div>
</div>
Are there any ways to achieve this effect using CSS or JavaScript?
Give this a shot:
CSS:
img{
border: 1px solid white;
margin: -4px;
}
HTML:
<div class="gallery">
<div class="picture">
<img id="main-product-img-43" itemprop="image" title="Image of $25 Virtual Gift Card" src="//images/thumbs/0000072_25-virtual-gift-card_550.jpeg" alt="Image of $25 Virtual Gift Card">
</div>
</div>
#container {
position: relative;
border: 1px solid black;
height: 100px;
width: 200px;
border-radius: 6px;
}
#container:after {
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
border: 1px solid magenta;
border-radius: 5px;
}<div id="container">
</div>
<!-- Insert your image in place of the div -->To achieve this effect, simply place the image inside a container and add a pseudo-element using the ::after selector. Give the pseudo-element an absolute position and apply styling such as borders.
Here is an example:
.gallery {
height: 300px; /* adjust as needed */
width: 400px; /* adjust as needed */
border-radius: 10px; /* adjust as needed */
overflow: hidden;
position: relative;
}
.picture:after {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 2px solid pink;
border-radius: 10px;
content: '';
display: block;
}<div class="gallery">
<div class="picture">
<img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="http://lorempixel.com/400/300" alt="Picture of $25 Virtual Gift Card">
</div>
</div>.exhibit {
border: dashed 2px #AFAFAF;
height: 300px;
width: 500px;
}
.artwork {
border: dotted 1px #FF1493;
height: 280px;
width: 480px;
margin: 20px auto;
}<div class="exhibit">
<div class="artwork">
//Artwork code
</div>
</div>It appears that the design includes an inner curved border within the image.
.picture {
position: relative;
display:inline-block;
}
.picture:before {
border-radius: 10px;
background: none;
border: 2px solid red;
content: "";
display: block;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
pointer-events: none;
}
.picture img{
vertical-align : middle;
}<div class="gallery">
<div class="picture">
<img id="main-product-img-43" itemprop="image" title="Picture of $25 Virtual Gift Card" src="https://placehold.it/200x100" alt="Picture of $25 Virtual Gift Card">
</div>
</div>Try incorporating the pseudo-element selector into your CSS.
img {
position: relative;
}
img:before { // In this example, I am using :before
content: '';
position: absolute;
left: 2%;
top: 2%;
width:98%;
height: 98%;
border: 1px solid pink;
}
After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...
I am exploring ways to make the table below, which displays data from a MySQL database, responsive so that it can adjust to smaller devices without compromising the image quality. Currently, I am delving into Bootstrap to understand its capabilities bett ...
Currently using mpdf1 and looking to generate a PDF with a table of 4000 rows. Any suggestions on how to achieve this using mpdf1? Is there a method to speed up the process and avoid waiting for several minutes? ...
My vertical navigation bar includes the following list items: <ul class="nav"> <li> <div> <i class="fa fa-tachometer"></i> <a href="#" class="noselect">Dashboard</a> </div> ...
I'm facing an issue with the Select2 plugin in my form. While all fields are required and marked by an asterisk when empty, the Select2 dropdown ignores this validation attribute. Therefore, I am wondering: Is there a way to display an asterisk image ...
.nav-header2{ background: purple; display: flex; justify-content: center; align-items: center; } .header2-container{ width: 68vw; height: 60px; padding: 0 2vh; border: 1px solid red; ...
I am facing an issue with implementing the ngShow directive in my code, where I am trying to display data fetched from an API call. However, despite everything else working correctly, the ngShow directive does not seem to be functioning as expected. Here ...
In an attempt to visualize time series data using chart.js, I am encountering some issues. The data is extracted from a psql database, converted to JSON format, and then passed as a parameter to a JavaScript function for rendering the chart. Although the ...
The text within the anchor tags, such as feature and pricing, is not visible on the webpage. I attempted to add a color attribute to change this but it did not have any effect. The only thing that changed was the cursor when hovering over the links, while ...
My issue involves a folder located in c:\images, where images are being updated by another application. I am attempting to have a Django application access and display these images on the admin site. The Django application is currently located in c:&b ...
What is the best CSS strategy for targeting elements with inline styles? How can I focus on the first span but exclude the second using only CSS? If that's not achievable, is it possible to accomplish this using jQuery? http://jsfiddle.net/TYCNE/ & ...
Despite my efforts to find a solution, I couldn't find anything relevant to my current situation. As part of my internship, I am tasked with developing a platform using Javascript. I have a specific set of values and require the user to input a valu ...
Here's the HTML code I'm working with: <p style="color:red;font-size:12px;">This budget-friendly car offers great value, complete with air conditioning making it perfect for couples and small families. There is a ?500 excess, but it can be ...
Hello everyone, I'm currently in the early stages of learning about Javascript and programming in general. As I prepare for a test, I've come across a question that has me feeling stuck. I need help evaluating the following statements to ...
Hello, I am facing an issue with displaying images retrieved from the database. They are not showing in-line. I have tried to put the images from a URL, and they display in-line, but the problem persists with images from the database. Any suggestions on ...
Looking to update my PHP code to read PDF files from three different paths: pdf_folder/2020/, pdf_folder/2021/, and pdf_folder/2022/. The current code reads just from pdf_folder/2020/ and sends the data to the database. This is the existing code: <?php ...
The variable abc is pointing to an object. What distinguishes abc.p = undefined from delete abc.p aside from their return values? ...
I'm in the process of creating a scrolling table with a maximum height, and here's what I've done so far: <table> <tbody style="height: 300px; overflow:auto;"> //php for loop to populate table with <tr>s/<td>s </t ...
y.html: <h4> Modified: <span id="link-modified"></span></h4> --> Date is not displayed jQuery: var modified_date = new Date((data.modified)*1000); --> data.modified is in UNIX timestamp $('#link-modified').text(mo ...
Struggling with aligning domain names in a 3 column setup, I have been attempting this for some time now without success. I am new to this and could use some guidance. Here is the code: TPL file <div> <p class="center">{foreach key=num it ...