Interactive Image with Description and Redirect

Hey, I'm trying to figure out how to create something similar to the image shown in this picture:

example

I attempted using Bootstrap grid but I keep ending up with a border around the edges. Any suggestions?

Answer №1

.custom-image {
  position: relative;
  display: inline-block;
  width: 200px;
  text-decoration: none;
  color: #000;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
  margin: 20px;
  transition: box-shadow .3s ease-in-out;
  will-change: box-shadow;
}
.custom-image:hover {
  box-shadow: 0 0 4px 0 rgba(0,0,0,.2);
}
.custom-image figure {
  margin: 0;
}
.custom-image figure img {
  width: 100%;
}
.custom-image figcaption {
  padding: 15px;
}
.custom-image figcaption .date {
  font-size: 12px;
  color: #999;
}
.custom-image figcaption .message {
  font-size: 16px;
}
.custom-image figcaption .message p {
  margin: 0;
}
.custom-image footer {
  background-color: purple;
  color: #FFF;
  font-size: 14px;
}
.custom-image footer p {
  margin: 0;
  padding: 7px 15px;
}
<a href="#" class="custom-image">
  <figure>
    <img src="https://static.pexels.com/photos/324658/pexels-photo-324658.jpeg">
  </figure>
  <figcaption>
    <span class="date">4/07/2017</span>
    <div class="message">
      <p>Lorem ipsum dolor sit amer</p>
    </div>
  </figcaption>
  <footer>
    <p>Read more</p>
  </footer>
</a>

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

JavaScript not functional, database being updated through AJAX calls

I have created a game using Phaser, a JavaScript library for games. Now I am looking to implement a score table using JS/PHP. My main focus is on transferring a variable from JS to PHP in order to update the database. I have researched numerous topics and ...

Construct a table featuring nested rows for every parent entry

Table 1 orderid customerName totalCost ---------------------------------- 1 Jonh £200.00 2 Ringo £50 Table 2 orderlineid orderid productName productPrice Quantity ----------------------------------------------- ...

Iterate through each entry in the database and identify and fix any duplicate records

In my form, I have a JSON array that includes the name and value of each input. I am attempting to add an "optionprix" attribute for each input with the "optionname" class based on the corresponding value of the input with the "optionprix" class. Here is ...

What could be causing the bottom of a vertical scroll bar to be cropped in Internet Explorer 11?

I am experiencing an unusual problem in IE11 where the content at the bottom of my page is being cut off along with the scroll bar that should allow for viewing that content. I have managed to resolve this issue in Chrome, Firefox, and Edge but I cannot se ...

Bootstrap 4 Equidistant Text Alignment

https://i.sstatic.net/Dbvq5.png I've been working on achieving a balanced layout and I'm looking for help. How can I create even spacing vertically between the text elements while keeping them contained within the card? Below is the HTML code s ...

Issue with Node.js Request - Unable to decode HTML content

I'm attempting to decode this HTML page using Node.js and the Request module: The JavaScript console shows that the charset is windows-1252: document.characterSet = "windows-1252"; I've tried all available encodings in iconv-lite, but none of ...

Click to Resize Window with the Same Dimensions

I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...

selecting unique elements using classes is not possible with jquery

I am experimenting with using ajax on dynamically generated html elements from django. I have tried selecting the instances by class, but for some reason, it is not working as expected. Can anyone point out my mistake here? javascript $(document).ready(fu ...

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...

Adjust the CSS to ensure that all elements have the height of the tallest element in the set

Can anyone help me solve a design issue I'm facing? I have a div with three floating buttons, but one of the buttons is taller than the others due to more content. I'm looking for a way to ensure that all buttons are the same height as the talle ...

TinyMCE toolbar missing the "hr" option

I am encountering an issue while using TinyMCE as my editor. I have added the plugin as instructed, but I cannot find the "hr" button/option in the editor interface. If anyone has any insights or solutions to this problem, please share! This is how I am ...

Adjusting Text Size Depending on Width

I recently used an online converter to transform a PDF into HTML. Check out the result here: http://www.example.com/pdf-to-html-converted-file The conversion did a decent job, but I'm wondering if it's feasible to have the content scale to 100% ...

Optimizing Video for HTML5: A Guide to Best

My website is filled with videos, but I've been experiencing slow loading times on some of them. Could the resolution be the cause? Any tips on how to optimize video loading speed? What are your thoughts and experiences with html5 video settings? Whi ...

Input fields are not being displayed in the Django form

I've been struggling with resolving this issue using chat GPT for quite some time now. It keeps indicating that everything is fine, but it's clearly not working as expected. At the moment, I am focusing on fixing the email field first before proc ...

Ways to enhance the performance of my websites' backend systems

Greetings! I am currently working on developing backends in ASP.NET 2.0, and have taken steps to optimize the performance by caching images, GZIPing CSS and JS files. The load speed of each option is good, but I am eager for even faster loading times. Alt ...

Code malfunctioning

<html> <body> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript> $('img').click(function(){ var ge ...

Creating two dropdown menus from a PHP array

Currently, I have a PHP array structured like this. $food = array ("Fruits" => array("apple","mango","orange"), "vegies"=> array ("capsicum", "betroot", "raddish"), "bisucuits"=>array("marygold", "britania", "goodday")); My task is to create two ...

The 'css' property cannot be set on something that is undefined

I'm attempting to dynamically change the size and color of a circle based on user input in the form fields. However, I've encountered the following error: Cannot set properties of undefined (setting 'css') Could anyone provide guidan ...

Issue with table not remaining inside the div on the content page of WordPress site

I am having trouble with a div on my website. When I include a table in one div it resizes perfectly, but when I do the same in another div using a different template, it doesn't work as expected. To see the issue, please visit: Home page, bottom lef ...

Tips for incorporating razor isolated/code behind CSS classes into MudBlazor components

Within my codebehind file, I have defined a CSS class. When I use the "class" attribute on normal HTML elements, the style is applied correctly. However, if I apply the class to a MudElement using the "Class" attribute, the style does not get pulled. Altho ...