Looking to simplify my page by reducing the number of divs, wondering if this "tile" could be achieved without using one.
Here's the example I have in mind:
<a href="mks.html" class="big-tile big-tile-1">
<h1>town<br>
library</h1>
</a>
I assume that the anchor tag would have a background: url(big-tile-1) set to top no-repeat; The big-tile itself will have fixed width and height. But I'm unsure how to style the h1 element. Any assistance would be greatly appreciated!
If you are looking to create a similar effect, you can try the following approach: Check out this JSFiddle Demo
Here is the CSS code:
.big-tile {
border:10px solid #ccc;
display:inline-block;
position:relative;
height:200px;
width:200px;
color:#fff;
background:url("http://lorempixel.com/400/200/nature/");
}
.big-tile h1 {
margin:0;
background:teal;
position:absolute;
padding:20px;
bottom:0;
left:0;
right:0;
}
Alternatively, if you prefer having the image in the markup instead of as a background image, you can also achieve this by following this link: http://jsfiddle.net/UFUq5/3/
HTML
<a href="#">
city<br />
park
</a>
CSS
a {
display:block;
height:500px;
width:350px;
background-image:url(http://exampleimage.com);
background-color:blue;
background-size:350px 350px;
background-repeat:no-repeat;
padding-top:400px;
padding-left:50px;
box-sizing:border-box;
color:black;
text-decoration:none;
font-family:sans-serif;
font-size:22px;
border:15px solid #808080;
}
Essentially, the big-tile-1 class may not be necessary, but you have the option to implement a similar approach, like shown here: http://jsfiddle.net/RU23A/1/
To enhance this further: 1. Incorporate an image into the background URL 2. Modify the font style to match the specified font.
If you want to achieve this effect:
<a id="image-overlay" href="mks.html" class="big-tile big-tile-1">
<img src="your image">
<h1> city <br> library </h1>
</a>
then apply the following CSS:
#image-overlay{
width: 300px;
height: 500px;
position: relative;
border: 10px #999 solid;
border-radius: 1px;
}
#image-overlay h1{
position: absolute;
bottom: 0;
left: 0;
background-color: green; //customize as desired
color: white;
padding: 10px;
font-family: Arial, sans-serif; //select your preferred font
font-size: 20px;
}
My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...
There seems to be an unusual gap or margin at the bottom of each row section in this portfolio grid gallery that's running in OwlCarousel. You can view an example here. https://i.stack.imgur.com/NHOBd.png I've spent a lot of time trying to solv ...
Is there a way to insert a vertical divider after each li element on the main menu? <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a>< ...
As I develop a content management system using Nuxt and Pug/Jade, I am looking for an efficient way to create a list of input fields for users to enter information. My idea is to use the v-for directive to render the list and dynamically set the value and ...
I am currently working on updating a small Javascript function that assigns an active class to the parent <div> of a group of radio buttons when the page loads and also when there's a change event. The existing function looks like this: functi ...
I have set up a wordpress page and integrated some JavaScript into it. When working in wordpress, there are two tabs on a page where you can input text - 'Visual' and 'Text'. The 'Text' tab is used for adding HTML and scripts ...
When I view my website on mobile devices, there is no background image displayed before playing a video. Below is the HTML code I am using: <div class="row " > <div class="col-12 text-center"> <video control ...
Currently diving into the world of Angular and I've successfully cloned the repository. After installing the dependencies using npm, I have the web server up and running smoothly. Accessing the page on localhost:4000 works like a charm. Interestingly ...
I am encountering an issue with variable value in input field. To provide some context, I have client information stored in a MySQL database. Using PHP, I retrieve this data and display it in a table. Currently, I am working on implementing a delete optio ...
Hello, I recently set up magento2 with the sample data included. After attempting to deploy static css/JS using the command php bin/magento setup:static-content:deploy, I didn't receive any errors but the issue persists. Additionally, I am unable to l ...
I am experimenting with adding a transition effect to the details element when it opens and closes: details { height: 1em; transition: height 2s; border: 1px solid; overflow: hidden; white-space: pre; } details[open] { height: 6em } <det ...
I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...
Looking for some guidance: I'm working on dynamically creating a table based on the response from an AJAX call. The table includes headers and rows, with new rows added using the "after" function. However, I'm facing an issue with accessing the ...
I need assistance with setting up a functionality on my website. I have a database containing rows of data, and each row has an 'ID' field in MySQL. I want to connect each ID to a button so that when the button is clicked, a PHP script will run t ...
Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...
How can I create an interactive button on a CSS3DObject within a cube made up of 6 sides? The button is located on the yellow side, but I'm facing issues with clicking on it. Whenever I attempt to click on the button, the event.target always points to ...
I am working on a project that includes a multiselect option with over 50,000 records. We are using AJAX to fetch data from the server based on user searches, which works fine. However, when a user tries to select all records by clicking the "check all" ...
I am looking to incorporate animation into my title div. Below is the HTML code I have so far: <div class="particles" id="tittle"> <!-- Displaying title from Firestore using JavaScript --> </div> Here is the CSS cod ...
I observed that the <details> element is rendered differently in Chrome and Firefox. Take a look at the code sample below. According to the HTML Standard: The first summary element child of the details element represents the summary or legend of the ...
I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...