Incorporating photos within the layout of a Twitter Bootstrap grid

Looking to showcase images like the ones found here: https://i.stack.imgur.com/eD4GD.jpg These images are original and come in various sizes. I want a hover effect that includes blur, fogging effects, and text placed in the middle of the picture. Check out what I have so far: JSFiddle

My question is, how can I correctly position these images so that they span the entire width of the screen, with 3 in a row all being the same size, closely touching both the top and bottom div, as well as each other, without expanding beyond their borders? Additionally, how can I ensure that the blur effect does not interfere with neighboring elements?

htmlcssimagetwitter-bootstrap

Answer №1

Make the following changes: Remove the classes "row" and "col-lg-12", and use the class "col-sm-12" instead.

<div class="col-sm-12">
                <div id="work1" class="col-sm-4">
                    <img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03257/POTD-SKY-SQUIRREL_3257854k.jpg">
                    <p class="text">ONE</p>
                </div>
                <div id="work2" class="col-sm-4">
                    <img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg">
                    <p class="text">TWO</p>
                </div>
                <div id="work3" class="col-sm-4">
                    <img class="image" src="http://s.hswstatic.com/gif/dolphin-pictures-1.jpg">
                    <p class="text">THREE</p>
                </div>
            </div>

CSS:

works img {
    height: 600px;
    width: 100%;}

Answer №2

To achieve the desired appearance, apply the following CSS styles:

.works img{
    display:block;
    max-width:100%;
}

.works [class^="col-"] {
    padding-left:0;
    padding-right:0;
}

.works .text{
    position:absolute !important;
    left: 0;
    right: 0;
}

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

How can I capture the ng-click event in AngularJS when using bootstrap-select for styled select inputs?

After selecting an option, I am facing an issue where I cannot capture the ng-click event when a user chooses a value from the drop-down menu. This is because the select option has been altered by bootstrap-select, as the default select option does not sup ...

jquerycssangularjsbootstrap-select

Use jQuery to generate and add several elements to the DOM

Hey there! Currently, I'm working on a real-time chat application using socket io. My goal is to display the user's username and message in a unique way by encapsulating the username in a strong tag. I've made some attempts: $('<div ...

javascripthtmljquery

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

javascripthtmlcss

Android Gmail Application: Implementing 1px horizontal spacing between inline images placed within <td> tags

Have you ever noticed that in the Android Gmail app, there can be a mysterious 1px gap between inline images? This little pixel problem can sometimes push the rightmost image outside the comfy frame of your email. It seems this glitch prefers images of cer ...

androidhtmlemailgmail

How to retrieve data from a JavaScript array in a separate JavaScript file

In my checklistRequest.js file, I populate an array and then try to access it in my Termine_1s.html file, which includes JavaScript code. Although I can access the array, when I attempt to iterate through it, only single digits are returned instead of stri ...

javascripthtml

Creating an Android application that integrates HTML styling efficiently

I currently have a social networking site with a mobile web version, and my goal is to package that view into an Android app and potentially enhance it with a custom splash screen. Essentially creating a branded browser window. If you have any tips or adv ...

jqueryandroidhtmlcssweb

Python AssertionError: The argument passed to the write() function in GAE must be a

Currently, I am utilizing Sublime Text 2 as my primary editor to develop a brand new Google App Engine project. UPDATE: While testing this code via localhost, I encountered an issue when accessing the app on appspot: Status: 500 Internal Server Error ...

htmlgoogle-app-enginepython-2.7

What is the best way to adjust the width of a div based on the remaining space in the viewport?

I've created a Wireframe to showcase the concept I'm aiming for. There are 2 screens included to illustrate how the layout should adapt to different screen sizes. Check out the Wireframe here The goal is to have a center-aligned container named ...

htmlcsslayoutflexboxresponsive-design

The checkbox is displayed as selected after being clicked in conjunction with another checkbox

In the tree structure, there are checkboxes that behave strangely when clicked. I have already read a similar discussion here. The problem I am encountering is that when I click on an item, it gets checked but the console does not show it as checked immed ...

javascriptjqueryhtmlcsscheckbox

Ways to access Windows Explorer by clicking on a link?

Is there a way to access a folder in Windows Explorer directly from an HTML website using a hyperlink? Currently, the following code only opens the folder within the web browser: <a href="file:///folder">Open Folder in Windows Explorer</a> ...

htmlwindows-explorer

Issue with VueJS where the datalist input does not reset the value

I am currently working on a Vue component that scans QR codes and adds information to a database upon successful scanning. The scanning process works perfectly fine. However, after successfully sending the data, I need to clear the input field in my datali ...

javascripthtmlvue.jsvue-componenthtml-datalist

In a responsive design, rearrange a 3-column layout so that the 3rd column is shifted onto or above the

My question is concise and to the point. Despite searching online, I have not been able to find any information on this topic. Currently, my layout consists of 3 columns: ---------------------------- |left|the-main-column|right| ------------------------- ...

javascriptjqueryhtmlcssresponsive-design

What is the best way to incorporate keyboard shortcuts into carousel operations using jQuery?

The example can be found here. I want to be able to navigate through the images using the left and right arrows on my keyboard. How can I achieve this using jQuery or CSS? This is the structure of the HTML: <div id="slider-code"> <a cla ...

javascriptjquerycsskeyboard

Determine the overall sum of all items

Utilizing data fetched from my SQLite database, I'm utilizing *ngFor to display a comprehensive list of items with their respective names, prices, amounts, and totals. How can I calculate the grand total and display it at the bottom of the list? chec ...

htmlangularsqliteionic-framework

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

The hyphen character is not displaying correctly

When I upload an XML file for RSS feeds, the link shows all the feeds correctly. However, when viewed on IE, the French word Tobique–Mactaquac (with a hyphen between two words) appears without the hyphen as TobiqueMactaquac. My charset is set to UTF-8. ...

phphtmlinternet-explorerutf-8

The styles are not being rendered on the Angular application

I have successfully implemented a Modal service with working HTML/CSS (Check it out on StackBlitz) div.cover { align-items: center; background-color: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; ...

htmlcssangularangular8

A guide on retrieving information from a database with PHP and transferring it to Javascript

As I work on creating a website using HTML, CSS, MySQL, and JavaScript, my goal is to allow users to log in and engage in a quiz with 40 questions. Below is the JavaScript code for a countdown timer that includes the "questions" variable. After 40 seconds ...

javascriptphphtmlmysql

A specialized WordPress template that loads just the header and footer

I have encountered a strange issue while trying to create a custom template for WordPress. The index.php file is working perfectly fine - all elements load without any issues. Here is the code in index.php: <?php get_header(); ?> <?php if ( is_ ...

phpcsswordpressheaderfooter

No space left around the image's border

Whenever I apply a border to an image, it comes with a margin and the image itself receives white padding. How can I remove the margin from the border? This is how I currently have it: border: 1px solid gray; ...

htmlcssbordermarginpadding